Simple Text Highlight with jQuery

Question

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 should I use a plugin which is 7kb? this should be solved with 2 lines of code...

Here is what I am doing, I'm searching in my webapp and I want to highlight matching parts, for example I enter "ab" as search query, then I will have these results loaded by Ajax into my 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>

So in the above results, every "ab" should be highlighted, like:

Ab icert

ab oony test

Ab normal ab iba!!!

So, my jQuery is:

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

Another thing that I need to mention is that: the User may enter "ab anotherquery" as his search query, so this should be exploded by space, and in the results every "ab" and "anotherquery" should be highlighted.

I would like to learn this, it's not a thing that I could not solve with ready plugins...

Thanks in advance

The large plugins for it allow you to ignore the fact that there may be html within your anchor tag. — Kevin B, Jan 04 '13 at 19:44
"_Why should I use a plugin which is 7kb? this should be solved with 2 lines of code..._" If you can, why are you asking question? — Ram, Jan 04 '13 at 19:45
@undefined :-) this is what people actually does on this site, learn new stuff! I said it should be possible with lines of code, not that I COULD DO IT with lines of code... — behz4d, Jan 04 '13 at 19:47
So, instead of learning new stuff, you want us to do it for you. That's not how it works here. — Kevin B, Jan 04 '13 at 19:48
It's definitely going to involve some regular expressions and onchange events. I would start there. — Sethen, Jan 04 '13 at 19:49
@KevinB what's wrong with you people? I just asked a question, what is this? don't answer and go away or vote down if you think it's not constructive, but I just asked a question, this should not be the way that you treat this... — behz4d, Jan 04 '13 at 19:50
I will admit, @undefined may have been a little snarky in his reply, but in the first sentence of your post you're acting like you're entitled to an answer when you haven't even provided something you've tried or researched yourself. This makes people less motivated to help you. Try something first, post it and see what you get. — Sethen, Jan 04 '13 at 19:52
There are already some answered questions which may answer your question as I understand it: http://stackoverflow.com/questions/9167855/highlight-text-inside-html-with-jquery http://stackoverflow.com/questions/119441/highlight-a-word-with-jquery — dasheddot, Jan 04 '13 at 19:52
@behz4d you have to use ranges for it and your 2 lines code got 20 lines or more hahah :P — Muhammad Talha Akbar, Jan 04 '13 at 19:53
@behz4d I haven't voted down and i haven't gone away. The simple fact is you haven't shown that you have put forth any effort to solve this on your own and there's too many missing variables here to give a complete answer. For example, is it possible for the anchor tag in your sample to have html? should partial matches be highlighted? should the whole word that contains the match be highlighted? — Kevin B, Jan 04 '13 at 19:55
Also, why are you doing it with $.each rather than the code that generates the html? — Kevin B, Jan 04 '13 at 19:56

Wojciech Zylinski · Accepted Answer · 2013-01-04T21:50:18.310

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

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

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

Demo (JSFiddle)

Simple Text Highlight with jQuery

1 Answers1

Linked