ISSUE :
 
Profile photo
Submitted by Richard Cox
on June 20th, 2011 at 14:10:49 EST

Highlight text using Javascript

I am writing a code using database and server side php programming to search knowledgebase database. However, I need to highlight the keywords that is being searched from the search result. I can do this with server side php programming but I thought it will be lot of overhead to do server side processing of entire result content. So I am looking for some client side Javascript to highlight the search keywords from the search result.
Is there any simple Javascript solution to highlight text?


Profile photo
Replied by Tim Joseph
on June 20th, 2011 at 14:56:31 EST
You can do something like this using Javascript.
Add your search result inside <div> </div> tags.
<div id="mainBody">
this is test content. this is test content. this is test content. this is test content. this is test content. this is test content. this is test content. this is test content.
</div>


And use Javascript to highlight the content inside your content <div> tag:
<script type="text/javascript">
function HighlightText(keywords)
{
var keywordArray = keywords.split(' ');
var containerID = document.getElementById('mainBody');
if (containerID)
{
var content = containerID.innerHTML;
for (var i = 0; i<keywordArray.length; i++)
{
var re = new RegExp('('+keywordArray[i]+')','ig');
content = content.replace(re,'<span style="background-color:yellow;">$1<\/span>');
}
containerID.innerHTML = content;
}
}

//Executing highlight method
HighlightText("content");
</script>
Accepted Answer
Accepted
 Answer

Profile photo
Replied by Richard Cox
on June 20th, 2011 at 15:50:57 EST
Thanks for the nice code sample. This works perfectly. Thanks for sharing.

Profile photo
Replied by Mish V
on June 19th, 2014 at 12:11:51 EST
Hi, Gr8 post. Works like a charm! I pass the keywords from a textbox (as in search) and find that the previous highlighted text does not go away. How do i achieve that?

Profile photo
Replied by SBajra
on June 19th, 2014 at 14:40:36 EST
You probably need to play around. I did some tweak to original code posted here and it worked.
Check the code below:

<html>
<body>
<div id="mainBody">
this is test content. this is test content. this is test content. this is test content. this is test content. this is test content. this is test content. this is test content.
</div>
<input type="text" id="txtInput">
<input type="button" id="btnHighlight" onclick="javascript:HighlightText(document.getElementById('txtInput').value);" value="Highlight!">

<script type="text/javascript">
var content = "";
var containerID = document.getElementById('mainBody');
if (containerID)
{
content = containerID.innerHTML;
}
function HighlightText(keywords)
{
var keywordArray = keywords.split(' ');
if (content!="")
{
var highlightedContent = content;
for (var i = 0; i<keywordArray.length; i++)
{
var re = new RegExp('('+keywordArray[i]+')','ig');
highlightedContent = highlightedContent.replace(re,'<span style="background-color:yellow;">$1<\/span>');
}
containerID.innerHTML = highlightedContent;
}
}
</script>
</body>
</html>