Highlight search term in javascript according to term

Question

example :

I want to search for "ency" (encyclopedia).

the result will be : encyclopedia the search result will be highlighted using the number of characters -> encyclopedia

WIll try to clear my point.... :

Ency -> *ency*clopedia

Encycl - > *encycl*opedia

any idea how to do it... ?

Thanks in advance.

could you please provide with some code you have tried till now? — manraj82, Jul 07 '13 at 09:39
http://stackoverflow.com/questions/1789945/method-like-string-contains-in-javascript check if this helps you in anyway — manraj82, Jul 07 '13 at 09:42

score 0 · Answer 1 · answered Jul 07 '13 at 10:03

If you are ready to use jQuery then it is easier:

var searchPattern = new RegExp(searchString, 'g');
$elem.html($elem.html().replace(searchPattern, "<ACRONYM class='srch'>" + searchString + "</ACRONYM>"));

Where, $elem is the jQuery object for the HTML element you are searching in. For example, if it is a particular div like <div id='me'>some text</div> and you are searching for text "some", then it will be like this:

var searchPattern = new RegExp('some', 'g');
$elem = $('#me');
$elem.html($elem.html().replace(searchPattern, "<ACRONYM class='srch'>" + searchString + "</ACRONYM>"));

Give appropriate highlight style for the css class 'srch'. Do not forget to remove the 'acronym' element with 'srch' class once your searching is over.

Highlight search term in javascript according to term

1 Answers1

Linked