在JS replaceAll操作期间忽略给定字符串中的html标记（特别是标记）

Question

我遇到过这样的情况：我在URL数组中循环（例如，[www.stackoverflow.com，www.ex.com]），并在循环期间将这些URL与给定的字符串逐个匹配，并替换为锚标记以使其可点击。

我可以使用JSreplace eAll方法，但在给定字符串中出现多个相同url的情况下，它甚至与标签中的url相匹配。

例如，如果给定的字符串是，请在www.stack.com/abc上查看它，并将www.stack.com、www.overflow.com“作为书签，给定的URL数组是[www.stack.com/abc、www.stack.com]

在第一次替换迭代期间，它将是“在

然后问题出现在第二次迭代中，它甚至会替换标签中的字符串。我想在replace eAll方法期间忽略html标记。有人能帮我吗？

我试着用下面的正则表达式忽略标记，但它在锚标记之间的内容不起作用。

exString.replaceAll(new RegExp(url + "(?![^<>]*>)", "gi"), replaceText);




Answer 1

虽然mplungjan提供的解决方案很聪明，效果也很好，但我想发布一个替代方案。

来自接受答案的算法将输入字符串处理成一个单词数组，然后继续遍历每个URL上的每个单词。然后需要查看是否有任何单词以符号结尾，如果有，则截断。这将是一个有点消耗，因为人们可以想象50个单词X 5个可能的URL=250个组合和O（n^2）计算。然后想象可能有20个可能的URL和20个输入文本，每个包含15个单词。最后，提到该算法可能存在区分大小写的问题。

这个解决方案使用了mplungjan方法中的很多思想，但是相反，它只会快速缩小它通过RegEx实际需要处理的内容，然后再次循环以应用实际匹配的内容。此外，正则表达式纠正了可能存在的区分大小写问题。

let str = 'Check it out at www.stack.com/abc and bookmark the www.stack.com, www.overflow.com.';
let urls = ["www.stack.com", "www.stack.com/abc", "www.not-here.com"];
let arReplace = [];

// sort by longest URLs (prevents processing identical root domains on sub-domains)
urls = urls.sort((a, b) =>{
  if(b.length > a.length)
    return 1
  return -1
});

// find URLs and apply replacement tokens
urls.forEach((url) => {
  if(str.match(new RegExp('\\b' + url + '\\b', 'i'))){
    arReplace.push(url);
    str = str.replace(new RegExp('\\b' + url + '\\b', 'gi'), '%ZZ' + (arReplace.length - 1) + 'ZZ%')
  }
});

// replace tokens
arReplace.forEach((url, n)  =>{
    str = str.replace(new RegExp('%ZZ' + n + 'ZZ%', 'g'), '<a href="' + url + '">' + url + '</a>')
});
document.body.innerHTML = str

小提琴链接：https://jsfiddle.net/e05o9cra/

Answer 2

那我们就分道扬镳吧

const div = document.getElementById("text");
let str = div.textContent;
let arr = str.split(/ /)
console.log(arr)

const urls = ["www.stack.com/abc", "www.stack.com"];
arr.forEach((word,i) => {
  const punctuation = word.match(/(\W$)/)
  if (punctuation) word = word.slice(0,-1)
  const idx = urls.indexOf(word);
  if (idx !=-1) arr[i] = arr[i].replace(word,`<a href="${word}">${word}</a>`)
})
console.log(arr)
div.innerHTML = arr.join(" ")

<div id="text">Check it out at www.stack.com/abc and bookmark the www.stack.com, www.overflow.com.</div>