✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Highlight Words On Search Using JavaScript

Last Updated : Jul 1, 2023

IN - JavaScript HTML CSS | Written & Updated By - Dikshita

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

Highlight Words On Search Using JavaScript

CHECK OUT THIS TUTORIAL LIVE DEMO →

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.

I hope this tutorial on search and highlight text javascript helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →