Highlight Search Result Vanilla JavaScript

Highlight Search Result Vanilla JavaScript

In this tutorial, you will learn how to search and highlight all occurrences of a word in javascript or javascript highlight text in div.

Whenever you work with JavaScript. So you may need to highlight search in html page or div and paragraphs. This tutorial will help you tutorial how to highlight search in an HTML page, paragraph, and div, text web page.

Javascript Highlight search result

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

Create one html file

First of all create a new html file and update 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, we will write CSS here and put this CSS in the HTML file.

<style>
#paragraph span{
    background-color: green;
    color:#555;
}

div {
    padding: 10px; 
}

</style>

In this example, we have kept the color of the search highlight text green. You can also set any other color you want.

Implement JavaScript Code

After this, we will write JavaScript code. Which will highlight the search.

When you type a word in the input given in the form and then click on the search button, then the function call of JavaScript will be made. And it will check what you have written in the input box. Whether it is in the following paragraph or not.

If you have written in the word input box. If that word is found in a paragraph, its background color will be green.

So update 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>

Leave a Reply

Your email address will not be published. Required fields are marked *