HTML Search Text and Highlight

Jumping straight to the solution:

//modified search function
1.function searchtext(inputText, searchString){
2.
3.
4. //building RegExp object for the search text g-global match,i-ignore case
5. var myregexp = new RegExp(searchString, "gi");
6.
7. //custom replace function just to highlight the match word in the html source
8. var myNewString = inputText.replace(myregexp,
9. function(matchTxt,key,txt){
10. return "<span style='background-color:red;>'" + matchTxt + "</span>";
11. } );
12.
13. //return the new highlighted text
14. return myNewString;
15.
16.}

I think going through the code will be just self explanatory as the solution is straight-forward.But did you see some weird implementation ? Bingo! you found it :) It's the custom replace function.

Let's get dirty with some syntax explanation and we will be soon back with the explanation of its implementation here.

7. //custom replace function just to highlight the match word in the html source
8. var myNewString = inputText.replace(myregexp,
9. function(matchTxt,key,txt){
10. return "<span style='background-color:red;>'" + matchTxt + "</span>";
11. } );

Here we have written a custom replace function to replace the matching text.We will see how it works.

First it will match the regular expression and it passes the matched text to the first argument of the replace custom function , the second argument is the runtime unique key , the third is whole text to which the search has been made.

So here is the steps that will be followed while executing the code,

1. Match the mySearchField with myregexp and find the match
2. Pass the match to matchTxt field of the custom function.
3. Wrap the matchTxt with some background color and return the modified text.
4. Replace the match with the modified text .
5. Repeat the steps 1-4 till no match is found.

Thus the explanation of the solution.

Alternatives:

1.We can just write the implementation as mySearchField.replace(myregexp,"" + textse + "");

Here,
textse - is the user entered search string

But the problem is the alphabets lower case and upper case of the original content will not be preserved, so our implementation will be a neat solution for this problem.

2. We can use indexOf and lastIndexOf of the search strings and replace the content to highlight search.
As shown in this page indexOf implementation

But when compared for efficiency ours O(n) algorithm and indexOf would be O(n*m)

Here,
n - is the number of search string match in the given content
m - is the number of tag matches

So our solution holds good for this case.

Hope this helps and will meet you soon with another cool post fo custom replace method implementation :) .

An alternate efficient implementation posted by h3 for this code is

function highlight(i, s) {
return i.replace((new RegExp('('+s+')', 'gi')), '<span class="higlight">$1</span>');
}

This bit straight forward and more efficient . Thanks h3 for your comment. :)