How to Highlight HTML Text with jQuery

Submitted by razormist on Tuesday, December 6, 2022 - 23:00.

How to Highlight HTML Text with jQuery

Introduction

In this tutorial we will create a How to Highlight HTML Text with jQuery. This tutorial purpose is to help you on how to do the search highlight text. This will cover all the basic parts for search highlight text using the jQuery plugin. I will provide a sample program to show the actual coding of this tutorial.

This tutorial is easy to understand just follow my instruction I provided and you can do it without a problem. This program is useful if you want to add an extra feature that can highlight important keyword for your website. I will try my best to give you the simplest way of creating this program Highlight HTML Text with jQuery. So let's do the coding.

Before we get started:

First you have to download the jQuery plugin.

Here is the link for the jQuery that i used in this tutorial https://jquery.com/.

Lastly, this is the link for the template that i used for the layout design https://getbootstrap.com/.

Creating The Interface

This is where we will create a simple interface for our application. This code will display the html form and a sample paragraph. To create this simply copy and write it into your text editor, then save it as index.html.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<style>
			.highlight{
				background:orange;
				font-weight:bold;
			}
		</style>
	</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
		</div>
	</nav>
	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-primary">How to Highlight HTML Text with jQuery</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<div class="col-md-4">
			<div class="form-group">
			<label>Enter a word</label>
			<input type="text" id="search" class="form-control" placeholder="Search here.."/>
			</div>	
		</div>
		<div class="col-md-8" style="text-indent:50px;">
			<p>A boy gets his coat, boots, and pellet gun. He's going to a nearby pond to look for Nethers, an alien species he suspects is planning a kidnapping. Sometimes he shoots the Nethers; sometimes they capture him. While on his quest, he sees something that causes a change in him mission.</p>
		</div>
	</div>
<script src="js/jquery-3.2.1.min.js"></script>	
<script src="script.js"></script>
</body>	
</html>

Creating JavaScript Function

This is where the main function of the application is. This code will automatically highlight the text when your enter a word in the search box. To do this just copy and write these block of codes inside the text editor and save it as script.js.

function highlightText(search){
 
	if(search){
		let content = $('p').text();
		let searchWord = new RegExp(search, "ig");
		let matches = content.match(searchWord);
 
		if(matches){
			$("p").html(content.replace(searchWord, function(match){
				return "<span class='highlight'>"+match+"</span>";
			}));
		}else{
			$('.highlight').removeClass('highlight');
		}
	}else{
		$('.highlight').removeClass('highlight');
	}
}
 
$(document).ready(function(){
	$('#search').on('keyup', function(){
		highlightText($(this).val());
	});
});

In the given code we first create a method called highlightText(). In the first three line of code we set a certain variables that will have some important functionality. Then will create a conditional statement that will search if the entered word and the word in the paragraph is a matched. When matched the searched word will be highlighted with a background color otherwise it will not be colored.

Lastly, we will call first the basic jQuery ready event to signal that the DOM of the page is now ready to be use. Then bind the input text box with a jQuery function called on() with a condition of keyup, this will track your keyboard press and will dynamically highlight the word that have been search using our method highlightText()

Output:

The How to Highlight HTML Text with jQuery source code that I provide can be download below. Please kindly click the download button.

There you have it we successfully created How to Highlight HTML Text with jQuery. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!

More Tutorials for JavaScript Language

JavaScript Tutorials

Add new comment

280 views

How to Highlight HTML Text with jQuery