Do you want to be a good Web Developer?

Enter Your Email To Get Our Exclusive Tutorials
And Offer Right In Your Email

Join TalkersCode Community And Recieve Exclusive Tutorials
On Web Development Right Via Email.

Highlight Words On Search Using JavaScript

Wednesday, Jan 11, 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