在有人在我的网站上搜索某些内容后,我会在结果列表中突出显示搜索的词。
例如,如果您搜索“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>
这很糟糕。
我该如何避免呢?