Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

Highlight Words On Search Using JavaScript

Saturday, Apr 8, 2017

Tags:- JavaScript HTML CSS


In this tutorial we will show you how to highlight words on search using JavaScript just like search engines highlight the matching word found in results whenever user entered on search box.You may also like Basic Instant FullText Search System Using Ajax And PHP


See Demo
Highlight Words On Search Using JavaScript


To Highlight Words On Search It Takes Only one Steps:-

  1. Make a HTML file and define markup,scripting and styling


Step 1.Make a HTML file and define markup,scripting and styling

We make a HTML file and save it with a name highlight.html

<html>
<head>
<script>
document.addEventListener( 'DOMContentLoaded',function(){
 var searchpara=document.getElementById("search_para").innerHTML;
 searchpara=searchpara.toString();
 document.getElementById("search").onclick =function ()
 {highlight_word(searchpara)};	
},false);

function highlight_word(searchpara)
{
 var text=document.getElementById("search_text").value;
 if(text)
 {
  var pattern=new RegExp("("+text+")", "gi");
  var new_text=searchpara.replace(pattern, "<span class='highlight'>"+text+"</span>");
  document.getElementById("search_para").innerHTML=new_text;
 }
}
</script>

<style>
#search_para
{
 color:grey;
}
.highlight
{
 color:blue;
 text-decoration:underline;
}
</style>
<body>
<div id="wrapper">
<input type="text" id="search_text">
<input type="button" value="search" id="search">
<div>
<p id="search_para">The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages. The new common language will be more simple and regular than the existing European languages.</p>
</div>
</div>
</body>
</html>

In this step we create a textbox and a button to search the word and then insert some sample text to search the word.In our javascript code we add eventlistener so that our code is ready after page load and then we get the innerHTML and make sure the innerHTML is only string so we converted the innerHTML to string then we bind the onclick event to button which calls the highlight function whenever user clicks on search button.In highlight_word() function we simply get the search box value and create a RegExp for replace function and then we use replace to replace all the matching words found in our sample text.You may also like Live Character Count Using JavaScript


Thats all, this is how to Highlight Words On Search using javascript.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email

Are You Starting A New Blog
Do You Want Best Web Hosting?

Try World's Best Web Hosting Provider BlueHost
At Just $3.95/mo

Hurry Up! Limited Time Offer

Yes, I Want To Check Out BlueHost

Check The World's Best SEO And All-In-One Marketing Toolkit
For Digital Marketing Professionals SEMRUSH

Check Out SEMRUSH