How to Highlight Searched Text Using JavaScript

CSSHow To !HTMLJavaScriptProgramming
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 & JavaScript

If 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.




			    
    
	




 





	
	
	

																																																								 
														 
														 
																					
		  

		  
	

	

	

		
Updated on 21-Jan-2022 13:29:25

		
 
		27 Views

				
		    
		
		

			
		

	






		
		



		


 Previous Page

Next Page  










   



			

				
Advertisements

				

					

					


				

			

		

	
				
					
	
	

	      

	      
ads