从标记元素数组中删除锚标记“<a href=""></a>”

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>'
];

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

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

这里需要一些 HTML 魔法…… 谢谢大家！

Answer 1

一种选择是将元素附加到临时 DOM 容器元素，然后使用本机 DOM API methods/properties 以检索所需的属性（ s).

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

这种方法的好处是，即使锚元素字符串具有多个顺序不同的不同属性，它也能正常工作。如果在 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

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

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] 是您需要的 URL。

Answer 4

循环每个数组，然后用空字符串替换 <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);

Answer 5

1。使用 DOM

创建占位符元素。
将数组组合成字符串。
使用 Element#insertAdjacentHTML 将 HTML 插入占位符。
使用 Array#map 从每个 link.

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从原始数组构建数组
在每次迭代中，return 用双引号分隔字符串的结果中的第二个元素。

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);

从标记元素数组中删除锚标记“<a href=""></a>”

Removing an anchor tag `<a href=""></a>` from an array of markup elements

html

javascript

arrays

href

1。使用 DOM

2。拆分字符串