Question

假设我有一个带url的数组（显示href属性）（不要问我为什么，就像那样）：

var MyArray = [
    '<a href="http://www.facebook.com/"></a>',
    '<a href="http://www.twitter.com/"></a>',
    '<a href="http://www.cnn.com/"></a>'
];

我想创建一个新的数组，使用相同的网址，但没有锚标记<a href=""></a>，所以像这样：

var MyNewArray = [
  "http://www.facebook.com/”,
  "http://www.twitter.com/",
  "http://www.cnn.com/"
];

这里需要一些HTML魔术...... 谢谢你们！

Answer 1

一个选项是将元素附加到临时DOM容器元素，然后使用本机DOM API方法/属性来检索所需的属性。

在下面的示例中，您可以将元素数组传递给将创建临时div容器元素的函数。然后将容器的innerHTML property设置为锚元素的连接列表。从那里，您可以访问本机href属性并返回所有值的映射数组。

这种方法的好处是，即使锚元素字符串具有不同顺序的多个不同属性，它也能工作。如果在href值周围使用单引号而不是双引号，它也会有效。

Example Here

function getAnchorHrefAttributes(elementsArray) {
  var container = document.createElement('div');
  container.innerHTML = elementsArray.join(' ');

  return Array.from(container.querySelectorAll('a')).map((a) => a.href);
}

var anchors = ['<a href="http://www.facebook.com/" class="test">1</a>',
  '<a href="http://www.twitter.com/"></a>',
  '<a href="http://www.cnn.com/"></a>'
];

function getAnchorHrefAttributes(elementsArray) {
  var container = document.createElement('div');
  container.innerHTML = elementsArray.join(' ');

  return Array.from(container.querySelectorAll('a')).map((a) => a.href);
}


var hrefs = getAnchorHrefAttributes(anchors, 'href');
console.log(hrefs);

或者，您也可以使用基本正则表达式（例如/href="([^"]+)"/）来捕获href属性值。但是，出于上述原因，我强烈建议避免正则表达式，以支持上述解决方案。

Updated Example

function getAnchorHrefAttributes(elementsArray) {
  return elementsArray.map((a) => {
    var match = a.match(/href="([^"]+)"/);
    return match ? match[1]: null;
  });
}

var anchors = ['<a href="http://www.facebook.com/" class="test">1</a>',
  '<a href="http://www.twitter.com/"></a>',
  '<a href="http://www.cnn.com/"></a>'
];

function getAnchorHrefAttributes(elementsArray) {
  return elementsArray.map((a) => {
    var match = a.match(/href="([^"]+)"/);
    return match ? match[1] : null;
  });
}


var hrefs = getAnchorHrefAttributes(anchors, 'href');
console.log(hrefs);

Answer 2

你可以循环遍历数组中的每个元素，并使用replace函数将标记替换为空字符串

var myString = '<a href="http://www.facebook.com/"></a>';

   myString = myString.replace('<a href="' , '');
    myString = myString.replace('"></a>' , '');


console.log(myString)

Answer 3

首先声明你的新数组。

var MyNewArray = [];

然后使用一个简单的for循环来分割每个数组元素，并将所需的URL插入到新数组中。

for (var i = 0 ; i < MyArray.length ; i++) MyNewArray[i] = MyArray[i].split('"')[1];

就是这样。

这是如何运作的？

您的数组元素<a href="http://www.facebook.com/"></a>将分为三个部分。

MyArray[i].split('"')[0] = '<a href='
MyArray[i].split('"')[1] = 'http://www.facebook.com/'
MyArray[i].split('"')[2] = '></a>'

因此，在每次迭代中，第二部分，即MyArray[i].split('"')[1]都是您需要的网址。

Answer 4

1。使用DOM

创建占位符元素。
将数组合并为一个字符串。
使用Element#insertAdjacentHTML将HTML插入占位符。
使用Array#map根据每个链接的href属性构建一系列网址。

var a = ['<a href="http://www.facebook.com/"></a>','<a href="http://www.twitter.com/"></a>','<a href="http://www.cnn.com/"></a>'];

const getURLarray = (a, c = document.createElement('div')) => 
    (c.insertAdjacentHTML("beforeend", a.join('')), [...c.children].map(e => e.href));

console.log(getURLarray(a));

2。拆分字符串

使用Array#map从原始数组构建数组
在每次迭代中，返回用双引号将字符串拆分的结果中的第二个元素。

var a = ['<a href="http://www.facebook.com/"></a>','<a href="http://www.twitter.com/"></a>','<a href="http://www.cnn.com/"></a>'];

const URLs = a.map(e => e.split('"')[1]);

console.log(URLs);

Answer 5

循环每个数组，然后用空字符串替换<a href="和"></a>。

var MyArray = ['<a href="http://www.facebook.com/"></a>',
    '<a href="http://www.twitter.com/"></a>',
    '<a href="http://www.cnn.com/"></a>'
    ];

for (var i = 0; i < MyArray.length; ++i) {
   MyArray[i] = MyArray[i].replace("<a href=\"", '');
   MyArray[i] = MyArray[i].replace("\"></a>", '');
}
console.log(MyArray);

从标记元素数组中删除锚标记“<a href="http://perldoc.perl.org/perlop.html#Equality-Operators" rel="nofollow noreferrer">perldoc perlop</a>”

5 个答案:

1。使用DOM

2。拆分字符串