Simple Text Highlight With Jquery

First of all, YES, I know there are many highlight jquery plugins out there, I've seen them and they made me satisfied, but now there is a question for me which I want to ask! Why

Solution 1:

Use RegExp and preg_quote (which takes care of characters used in regex).

functionpreg_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(newRegExp("(" + keywords.join('|') + ")" , 'gi'), "<b>$1</b>"));
});​

This will break the search query by space and wrap each match with <b>

Demo (JSFiddle)