Highlight Searched text on a page with in Javascript

by

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

Recommended:-JavaScript Comments, Identifiers, Keywords, Statements, Expression
Recommended:-JavaScript Variable Tutorial Example
Recommended:-JavaScript Operators List
Recommended:-JavaScript Data Types
Recommended:-JavaScript Arithmetic Operators
Recommended:-JavaScript Unary Operators Tutorial
Recommended:-JavaScript Assignment Operators
Recommended:-JavaScript Logical Operators with Example
Recommended:-JavaScript Comparison Operators Examples
Recommended:-JavaScript Ternary Operators Examples
Recommended:-JavaScript If Else, Else If Statement Statement Tutorial
Recommended:-JavaScript If Else, Else If Statement Statement Tutorial
Recommended:-JavaScript Switch Case Statement Tutorial
Recommended:-JavaScript While, Do-While, For and For-In Loops
Recommended:-JavaScript While Loop with Example
Recommended:-JavaScript do-while Loop with Example
Recommended:-JavaScript for Loop with Examples
Recommended:-Continue Statement in JavaScript
Recommended:-JavaScript Error Try-Catch Statement
Recommended:-Break Statement in JavaScript
Recommended:-JavaScript Get Element By id, name, class, tag value
Recommended:-JavaScript Replace String Method
Recommended:-Check if String Contains Substring JavaScript
Recommended:-JavaScript slice() String: Extract Substring from String
Recommended:-JavaScript Remove Whitespace from a String
Recommended:-javaScript Push Array Into Array
Recommended:-Sort Array JavaScript
Recommended:-JavaScript Find Position of Element in Array
Recommended:-JavaScript Concat or Merge Array

Leave a Comment