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代码，如链接，图像等，所以如果有人搜索“点击”，那么链接的onclick属性将被替换，我得到一个内部的跨度链接。

喜欢

<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()，iterate (and replace text in) text nodes.

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

1 个答案: