Javascript - 如何在不干扰页面中 HTML 的情况下添加指向页面中单词的链接

Question

我正在制作一个搜索特定单词的工具，当它找到它们时，它将它们包装在 <span> 中。标记并添加指向它们的链接。我一开始以为这很简单，但很快意识到它并不那么简单，因为有很多不同的方式可能会弄乱页面中的 HTML 元素。

注意:在这个例子中，它寻找像这样的代码 rs25283 ，但此脚本还需要查找将在数组中提供的预定义单词。

我从一些非常简单的事情开始:

var pattern = new RegExp("(rs[0-9]+)","ig");
output = $('body').html().replace(pattern, function replacer(contents,word) {
    return '<span>' + word + ' <a href="https://mylink.com/item/'+ word +'"></a>  </span>'; 
});

这当然失败了，因为它替换了 HTML 元素和属性中的单词并造成了困惑。像这样向模式添加空格:

var pattern = new RegExp("([ ]rs[0-9]+[ ])","ig");

会减少错误替换的数量，但仍然不起作用，因为例如可能有这样的 HTML <img src="whatever.jpg" alt="Some info about rs25162 in here.">

因此脚本将破坏该 img 标签。

因此，我尝试的一种更先进的方法是将整个页面分成这样的部分:

var words = $('body').html().split(' ');

然后循环遍历每个部分，看看是否能找到匹配项。为了查找匹配项，我将有一个我要查找的单词的关联数组，因此当循环访问页面上的每个单词时，我会检查它是否存在于数组中。

就像:

var search_words = [
  'rs14235',
  'rs6262',
  'COMT',
  'ACE'
];

for (i=0;i<words.length;i++) {
  if (search_words.indexOf(word[i]) > -1) { // do something }
}

现在问题仍然存在，它会破坏标签，但现在我能做的是检查属性何时用“打开，这样我就知道该单词是否在 HTML 标签属性内。标签本身是有点棘手。例如，如果出现 <h1>Title with word in it</h1> ，我不想替换该单词。我无法过滤掉 HTML 标记中出现的任何内容，因为我需要替换的单词可能在 <p> 内。 、 <div> 、 <span> 等标签。

那么，最好的解决方案是创建一个列入黑名单的 HTML 标签列表吗？我假设成千上万的程序员都遇到过这种情况，所以我不想在这里重新发明任何轮子，如果有人能向我展示执行此操作的最佳方法，我将不胜感激。

编辑:我发现这篇文章描述了这个问题:http://james.padolsey.com/javascript/replacing-text-in-the-dom-its-not-that-simple/

Answer 1

例如，您可以尝试使用 .not() 选择器

$pattern = new RegExp("(rs[0-9]+)","ig");
$blacklist= $("Choose any tag class or id, p,div,a,span,nav,ul,li").not($pattern );