找出所有链接并用它们的href值替换它们。

Question

我认为我有一个类似于以下字符串：

<a href="site/project/109#" target="_blank">href</a> text, text, <a href="/target" class="test">test</a>

我需要输出。

 site/project/109# text, text, test

---

我能够找到所有链接。

---

var txt = msg.match(/\<a\shref=\"(.*)\"\s(.*)[\<\/a\>]/gmi);

在循环中进行替换。但我希望缩短代码，通过单个replace完成所有操作，像这样：

var txt = msg.replace(/\<a\shref=\"(.*)\"\s(.*)[\<\/a\>]/gmi, $1); 

但在这种情况下，我得到的是：[object HTMLHeadElement]。

- Oleksandr Maliuta

---

不要使用正则表达式解析HTML。 - trincot

为什么不使用 document.getElementsByTagName('a') 来检索元素及其 href 呢？ - sid-m

从错误信息中可以清楚地看出，msg 不是一个字符串。 - trincot

因为这是字符串。 - Oleksandr Maliuta

在您的示例中，您没有转换第二个锚点。 - theonlygusti

Answer 1

不要使用正则表达式来解析HTML，最好生成一个带有内容的元素，并在元素上进行其余操作。

var str = '<a href="site/project/109#" target="_blank">href</a> text, text, <a href="/target" class="test">test</a>';

// create an element
var temp = document.createElement('div');

// set the content with the string
temp.innerHTML = str;

// get all `a` tags and convert into array
// for older browser use `[].slice.call() 
// for converting into array
Array.from(temp.querySelectorAll('a')).forEach(function(ele) {
  // create a text node with the attribute value 
  var text = document.createTextNode(ele.getAttribute('href'));
  // replace a tag wit the text node
  ele.replaceWith(text);
});

// get the updated html content
console.log(temp.innerHTML)

为什么不用正则表达式？：RegEx match open tags except XHTML self-contained tags

---

更新：msg 变量是一个元素对象，而非字符串，这就是为什么它会被转换为 [object HTMLHeadElement]（HTMLHeadElement 指的是 HEAD 标签，我认为你的核心检查也有问题）。因此，请按照上述步骤将 temp 替换为 msg。如果您想保留原始元素内容，则生成与上述相同的 temp 元素，并将内容设置为 temp.innerHTML = msg.innerHTML。

- Pranav C Balan

---

我明白了，regexp把我的字符串当作HTML了？ - Oleksandr Maliuta

Answer 2

如果您正在使用jQuery（非常好，可以做所有事情），那么您可以很容易地获取href：

var string = '<a href="site/project/109#" target="_blank">href</a> text, text, <a href="/target" class="test">test</a>';
var href = $(string).attr('href');

这意味着设置锚标签的文本是微不足道的：

$(string).text($(string).href));

- theonlygusti