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