javascript - 如果不是标签的一部分，如何替换字符串？

Question

在有人在我的网站上搜索某些内容后，我会在结果列表中突出显示搜索的词。

例如，如果您搜索“Lorem”，您将获得标题为“Lorem ipsum dolor sit amet”的文章作为结果之一，其中“Lorem”将突出显示，因为这是您搜索的词，而其他词将使用正常字体。

我的功能目前是这样的：

function highlightSearchedTerm(term) {
      var regex = new RegExp('('+term+')', 'gi');
      $('.markable').each(function(){
         var content = $(this).html();
         var replaced = content.replace(regex, "<span class=\"highlight\">$1</span>");
         $(this).html(replaced);
      });
   }

问题是在文章的文本中可能有一些 HTML 代码，如链接、图像等，所以如果有人搜索“click”，那么链接的 onclick 属性将被替换，我会在链接中得到一个 span。

喜欢

<a href="http://www.example.com" onclick="window.open(this.href);return false;">link</a>

会被替换，我会得到

<a href="http://www.example.com" on<span class="highlight">click</span>="window.open(this.href);return false;">link</a>

这很糟糕。

我该如何避免呢？

Answer 1

而不是使用.html()，迭代（并替换文本）文本节点。