javaScript highlight text search result; In this tutorial, you will learn how to search and highlight all occurrences of a word in javascript or javascript highlight text in div or textarea.
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 Text Result
Using the following steps; you can highlight search text in Textarea or Div using javaScript; as shown below:
- 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>
