Javascript 如何使用jquery突出显示搜索结果中的搜索关键字？_Javascript_Jquery_Html

Javascript 如何使用jquery突出显示搜索结果中的搜索关键字？

javascript jquery html

Javascript 如何使用jquery突出显示搜索结果中的搜索关键字？,javascript,jquery,html,Javascript,Jquery,Html,例如，搜索结果中有以下html，aa是关键字： <body> <div> <h2><a href="#aa">aabbcc</a></h2> </div> <div> <h2><a href="#bb">aaeeedd</a></h2> </div> <div> <h2><a href="

例如，搜索结果中有以下html，

aa

是关键字：

<body>
<div>
    <h2><a href="#aa">aabbcc</a></h2>
</div>
<div>
    <h2><a href="#bb">aaeeedd</a></h2>
</div>
<div>
    <h2><a href="#cc">vvaapp</a></h2>
</div>
</body>

但所有html都被替换，包括href'#aa'。我想使用

each（）

和

text（）

也许可以。

还有更好的解决方案吗？

最好使用text.textContent（）比较容易记住，您仍然可以同时使用Jquery和JS

$（'div a'）。每个（函数（）{
var text=$（this.text（）；
$（this.text（text.replace（'aa'，'bb'））；
})

我找到了一个函数来解决它！而且它工作得很好

//highlight the search keyword
function highlight($area,keyword) {
    var re = new RegExp("(" + keyword + ")(?=[^<>]*<)","gi");
    var html = $area.html().replace(re, '<span class="searchkeyword">$1</span>');
    $area.html(html);
}

highlight($('body'), 'aa');

//突出显示搜索关键字
功能突出显示（$区域，关键字）{
var re=new RegExp（“（“+关键字+”）（=[^]*
$（'filter'）。在（'keyup'，函数（事件）上{
var关键字=event.currentTarget.value；
突出显示（'a'，关键字）；
});
功能突出显示（选择器、关键字）{
$（选择器）。每个（函数（索引、元素）{
变量$element=$（element）；
var original=$element.data（'originalText'）；
如果（原始==未定义）{
original=$element.html（）；
$element.data（'originalText'，原件）；
}
$element.html（original.replace（关键字“+”关键字+”）；
});
}
。突出显示{
背景颜色：黄色；
}

如果是文本，请使用.text（）only@guradio我认为使用.text（）
替换文本然后将文本输出应用到正文是个坏主意！！您想用文本“bb”替换“aa”
的文本吗"
浏览整个文档？响应什么事件？@David Thomas我想在搜索中突出显示搜索关键字results@DavidThomas@working？可能使用regex会更好。它可以处理多次发生的替换。@Reddy check update html只是一个例子，实际可能更复杂。我只想选择一个container div，则内容将全部替换。是否需要.each（）
和.text（）
？是的，因为如果不循环遍历每个元素，则不会更改所有元素。@guratio如果
包含
？.text（）
将清除该问题。感谢您的编码！但我可以选择一个容器标记，该标记可能包含许多不同的标记，使用RegExp不仅包含关键字
，而且不需要。each（），请在答案中查找我的代码。
//highlight the search keyword
function highlight($area,keyword) {
    var re = new RegExp("(" + keyword + ")(?=[^<>]*<)","gi");
    var html = $area.html().replace(re, '<span class="searchkeyword">$1</span>');
    $area.html(html);
}

highlight($('body'), 'aa');