使用 jQuery 突出显示简单的文本答案

【问题标题】：Simple Text Highlight with jQuery使用 jQuery 突出显示简单的文本
【发布时间】：2013-01-05 05:50:18
【问题描述】：

首先，是的，我知道那里有很多突出显示的 jquery 插件，我已经看过它们，它们让我很满意，但是现在有一个问题要问我！

为什么要使用 7kb 的插件？这应该用两行代码解决...

这就是我正在做的事情，我正在我的 web 应用程序中搜索并且我想突出显示匹配的部分，例如我输入“ab”作为搜索查询，然后我将通过 Ajax 将这些结果加载到我的 HTML ：

<div class="blah"><h3><a>Abicert</a></h3></div>
<div class="blah"><h3><a>The aboony test</a></h3></div>
<div class="blah"><h3><a>Abnormal abiba!!!</a></h3></div>

所以在上面的结果中，每个“ab”都应该被突出显示，比如：

Abicert

ab oony 测试

Ab正常abiba！！！

所以，我的 jQuery 是：

$('.blah h3 a').each(function(){
    var text = $(this).text();
    var searched_text = 'ab';
    // MY QUESTION HERE - How to highlight part of this text
});

我需要提到的另一件事是：用户可以输入“ab anotherquery”作为他的搜索查询，所以这应该被空格分解，并且在结果中每个“@987654326 @" 和 "anotherquery" 应突出显示。

我想学这个，这不是我用现成的插件解决不了的事情......

提前致谢

【问题讨论】：

它的大插件可以让你忽略锚标签中可能有html的事实。
"为什么要使用 7kb 的插件？这应该用 2 行代码解决..." 如果可以，为什么要问这个问题？
@undefined :-) 这是人们在这个网站上实际所做的，学习新东西！我说用代码行应该是可能的，而不是我可以用代码行来做......
因此，您希望我们为您完成，而不是学习新东西。这不是这里的工作方式。
肯定会涉及到一些正则表达式和 onchange 事件。我会从那里开始。

标签： javascript jquery

【解决方案1】：

使用 RegExp 和 preg_quote（负责处理正则表达式中使用的字符）。

function preg_quote( str ) {
    // http://kevin.vanzonneveld.net
    // +   original by: booeyOH
    // +   improved by: Ates Goral (http://magnetiq.com)
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   bugfixed by: Onno Marsman
    // *     example 1: preg_quote("$40");
    // *     returns 1: '\$40'
    // *     example 2: preg_quote("*RRRING* Hello?");
    // *     returns 2: '\*RRRING\* Hello\?'
    // *     example 3: preg_quote("\\.+*?[^]$(){}=!<>|:");
    // *     returns 3: '\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:'

    return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
}


$('.blah h3 a').each(function(){
    var text = $(this).text();
    var searched_text = 'ab la';
    var keywords = searched_text.split(' ');
    keywords = $.map(keywords, preg_quote);
    $(this).html(text.replace(new RegExp("(" + keywords.join('|') + ")" , 'gi'), "<b>$1</b>"));
});

这将按空格分隔搜索查询，并用 b>

包装每个匹配项

Demo (JSFiddle)

【讨论】：