Question

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

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

以下是我正在做的事情，我在我的webapp中搜索，我想突出显示匹配的部分，例如我输入“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”，如：

Ab icert

ab oony test

Ab 正常 ab iba !!!

所以，我的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”作为他的搜索查询，因此应该按空格分解，并在每个结果中“应突出显示ab“和”anotherquery“。

我想了解这一点，这不是我用现成的插件无法解决的问题......

提前致谢

Answer 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>"));
});

这将按空格中断搜索查询，并使用＆lt; b ＆gt;

包装每个匹配项

Demo (JSFiddle)

使用jQuery简单文本突出显示

1 个答案: