Highlight Searched text on a page with in Javascript

javaScript highlight search text matching result on web page; Through out this tutorial, i am going to show you how to search and highlight all occurrences of a word in javascript on web pages.

JavaScript Highlight Text Search Result

Use the below given steps to create highlight text search result on web pages using javaScript; as follows:

  • Create one html file
  • Implement Css
  • Implement JavaScript Code

Create one html file

Create a new html file and add the following code into your file:

<!DOCTYPE html>
<html>
<head>
   <title>Javascript Highlight Search Result</title>
</head>
<body style="background: #F1F1F1">
  
<div style="text-align: center"><h2>Javascript Highlight Search Result</h2>
<form action="javascript:void(0)" method="" id="searchBar" name="searchBar">
<input name="search" id="search" type="text" size="25" maxlength="25">
<input name="search_button" type="button" value="Search" onClick="findAndHighlight()">
</form>
</div>
<div id="paragraph">
<p>JavaScript is a dynamic computer programming language. It is lightweight and most commonly used as a part of web pages, whose implementations allow client-side script to interact with the user and make dynamic pages. It is an interpreted programming language with object-oriented capabilities.</p>
<p>JavaScript is the Programming Language for the Web
JavaScript can update and change both HTML and CSS
JavaScript can calculate, manipulate and validate data</p>
</div>
  
</body>
</html>

Implement Css

The color in which you want the search to appear highlighted. For that, you will write CSS here and put this CSS in the HTML file. As follows:

<style>
#paragraph span{
    background-color: green;
    color:#555;
}
div {
    padding: 10px; 
}
</style>

Implement JavaScript Code

The following javascript highlight search code will highlight all search occurrences of a word. So, Add the below code into your html file:

<script>
	function findAndHighlight() {
    var text = document.getElementById("search").value;
    var search = new RegExp("(\\b" + text + "\\b)", "gim");
    var e = document.getElementById("paragraph").innerHTML;
    var enew = e.replace(/(<span>|<\/span>)/igm, "");
    document.getElementById("paragraph").innerHTML = enew;
    var newe = enew.replace(search, "<span>$1</span>");
    document.getElementById("paragraph").innerHTML = newe;
}
</script>

Full Source Code

<!DOCTYPE html>
<html>
<head>
   <title>Javascript Highlight Search Result</title>
<style>
#paragraph span{
    background-color: green;
    color:#555;
}
div {
    padding: 10px; 
}
</style>
</head>
<body style="background: #F1F1F1">
  
<div style="text-align: center"><h2>Javascript Highlight Search Result</h2>
<form action="javascript:void(0)" method="" id="searchBar" name="searchBar">
<input name="search" id="search" type="text" size="25" maxlength="25">
<input name="search_button" type="button" value="Search" onClick="findAndHighlight()">
</form>
</div>
<div id="paragraph">
<p>JavaScript is a dynamic computer programming language. It is lightweight and most commonly used as a part of web pages, whose implementations allow client-side script to interact with the user and make dynamic pages. It is an interpreted programming language with object-oriented capabilities.</p>
<p>JavaScript is the Programming Language for the Web
JavaScript can update and change both HTML and CSS
JavaScript can calculate, manipulate and validate data</p>
</div>
  
<script>
	function findAndHighlight() {
    var text = document.getElementById("search").value;
    var search = new RegExp("(\\b" + text + "\\b)", "gim");
    var e = document.getElementById("paragraph").innerHTML;
    var enew = e.replace(/(<span>|<\/span>)/igm, "");
    document.getElementById("paragraph").innerHTML = enew;
    var newe = enew.replace(search, "<span>$1</span>");
    document.getElementById("paragraph").innerHTML = newe;
}
</script>
</body>
</html>

More JavaScript Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published.