Question

我想用文本链接替换字符串中的html链接，例如：

<a href="test.com">应该变成test.com。

我找不到符合我所有模式的正则表达式。原因链接可能具有更多不同顺序的属性：

<a class="test" href="test.com" title="test">

我该如何实现？

Answer 1

let str = '<a class="test" href="test.com" title="test">'
let result = str.split(/href="/)[1].split('"')[0]
console.log(result)

Answer 2

使用字符串作为HTML内容创建一个临时DOM元素，并遍历所有a标签并将其替换为相应的链接（通过获取href属性）。

let html = `<a class="test" href="test.com" title="test">`;

// create a temporary div element
let tempDiv = document.createElement('div');
// set html content as your string
tempDiv.innerHTML = html;

// get all a tags and iterate
tempDiv.querySelectorAll('a').forEach(ele => {
  // replace element with corresponding link
  ele.replaceWith(ele.getAttribute('href')) // or ele.href
})

// get html content of temporary element
console.log(tempDiv.innerHTML)

或者，您也可以使用DOMParser来解析html内容。

let html = `<a class="test" href="test.com" title="test">`;

// parser
let parser = new DOMParser();
// parse the string which returs a document object
doc = parser.parseFromString(html, "text/html");


// get all a tags and iterate
doc.querySelectorAll('a').forEach(ele => {
  // replace element with corresponding link
  ele.replaceWith(ele.getAttribute('href')) // or ele.href
})

// get html content from body
console.log(doc.body.innerHTML)

更新：使用正则表达式，您可以按以下方法提取并替换a标签（不推荐使用）。

var str = '<a class="test" href="test.com" title="test">';

console.log(str.replace(/<a[^>]*href="([^"]+)"[^>]*>(?:.*?<\/a>)?/g, '$1'));


var str1 = '<a class="test" href="test.com" title="test">abc</a>';

console.log(str1.replace(/<a[^>]*href="([^"]+)"[^>]*>(?:.*?<\/a>)?/g, '$1'));

参考：Using regular expressions to parse HTML: why not?

如何用文本链接替换HTML链接？

2 个答案: