- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Environmental Science
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- articles and Answers
- Effective Resume Writing
- HR Interview articles
- Computer Glossary
- Who is Who
How to Highlight Searched Text Using JavaScript
Hello Everyone, In this tutorial you'll learn how to highlight searched text using HTML & JavaScript. In the previous tutorials we shared Count Up / Count Down Animation With Javascript. Now, its time to create highlight searched text using js.
If we want to highlight the text in the Html document using the
<mark> tag, then we have to follow the steps which are given below. Using these steps, we can easily highlight the text.
Highlight Searched Text Using JavaScript with Source Code
To create highlight searched text you have to create three file: 1. HTML 2. CSS 3. JavaScript. After that you have to copy paste below code to you files.HTML
Firstly, you have to create html file with name index.html make sure you file has .html extensions. Now copy paste below html code to you index.html file.
<!--- coding by codegyan - codegyan.in -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highlight Searched Text</title>
<!--Google Font-->
<link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
<!--Stylesheet-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="wrapper">
<input type="text" id="text-to-search" placeholder="Enter text to search..">
<button onclick="search()">Search</button>
</div>
<p id="paragraph">
He ordered his regular breakfast. Two eggs sunnyside up, hash browns, and two strips of bacon. He continued to look at the menu wondering if this would be the day he added something new. This was also part of the routine. A few seconds of hesitation to see if something else would be added to the order before demuring and saying that would be all. It was the same exact meal that he had ordered every day for the past two years.
</p>
</div>
<!--Script-->
<script src="script.js"></script>
</body>
</html>CSS
Secondly, You have to create style.css file and copy paste below css code to you file. Make you you have file with .css extension.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Rubik",sans-serif;
}
body{
height: 100%;
background: linear-gradient(
to right,
#201d2e 50%,
#f6f6f6 50%
) fixed;
}
.container{
width: 90vmin;
background-color: #ffffff;
padding: 50px 40px;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
border-radius: 5px;
box-shadow: 0 20px 35px rgba(60,60,60,0.2);
}
.wrapper{
display: flex;
justify-content: space-between;
}
.wrapper input{
width: 60%;
padding: 10px 5px;
border-radius: 3px;
border: 1px solid #201d2e;
}
.wrapper button{
width: 30%;
background-color: #201d2e;
border: none;
outline: none;
cursor: pointer;
color: #ffffff;
border-radius: 3px;
}
.container p{
line-height: 35px;
text-align: justify;
margin-top: 30px;
}
mark{
background-color: #ffdd4b;
}JS
Lastly you have to create script.js file and copy paste following code to you file.
// Characters to be escaped [.*+?^${}()|[\]\\]
function search(){
let textToSearch = document.getElementById("text-to-search").value;
let paragraph = document.getElementById("paragraph");
textToSearch = textToSearch.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");
let pattern = new RegExp(`${textToSearch}`,"gi");
paragraph.innerHTML = paragraph.textContent.replace(pattern, match => `<mark>${match}</mark>`)
}Also Read : How to Create Text To Speech Converter in HTML & JavaScriptIf you wann to check the demo of this code, then you can check using below demo button. Click on the following download button to download all source code files of highlight search text directly on your computer.
Final Word
In this way, we can highlight search text in HTML CSS & JavaScript. I hope you all like this tutorial. Keep with us for next tutorial. if you wann the source code of this code you can get this on our github account. If you have any query please free to contact us Or comment below.
Advertisements
ads
