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

会减少错误替换次数，但仍然无法正常工作，例如，可能会有像这样的<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 }
}

现在问题仍然存在，它会破坏标签，但现在我可以做的是检查何时用＆＃34;打开属性，这样我就知道这个单词是否在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 );

Javascript - 如何在页面中添加指向文字的链接，而不会干扰页面中的HTML

1 个答案: