jQuery Search Text on Page and Highlight

The “Finder” jQuery plugin helps you to create the search functionality to find and highlight text on a page. The plugin provides a visual interface to search and highlight text. It is inspired by Chrome “Find in Page” function to find text and highlight matches in yellow.

The plugin displays the number of matching words with next and previous words navigation buttons. Similarly, it has a button to toggle the search input. The Font Awesome icons are used to make these buttons visually attractive.

Moreover, this plugin finds specific characters/words from plain text and scroll to the matched word. Not only plain text but also able to search and highlight rich text (formatted text). In short, it can search for text whether it is wrapped by any HTML tag.

HTML Structure

First of all, load the Font Awesome CSS and the jQuery JavaScript library into the head tag of your HTML document.

<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"/>
<!-- jQuery -->
<script
	src="https://code.jquery.com/jquery-3.3.1.min.js"
	integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
	crossorigin="anonymous">
</script>

After that, create a div element with a class name “app” and define the data-attributes data-finder-wrapper and data-finder-scroll-offset with a value of 175. Inside this div, place a button element with a class name “finder-activator” and a data-attribute data-finder-activator. Likewise, create a div element with a class name "content" and place your content inside it.

<div class="app" data-finder-wrapper data-finder-scroll-offset="175">
   <button class="finder-activator" data-finder-activator><i class="fas fa-search"></i></button>
   <div class="content" data-finder-content>
      <p> Your text goes here...</p>
   </div>
</div>

You can are not limited to place only text inside the content container. You can place any other HTML elements like images, videos, tables, etc along with your text. The Finder plugin is able to search through these elements just like the browser native “Find” option.

Now, add the following CSS styles for finder, buttons, and search input. You can customize these styles according to your needs.

.finder {
	position: absolute;
	top: 50px;
	right: 0;
	left: 0;
	z-index: 999;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	height: 50px;
	background: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	border-bottom: 1px solid #e5e5e5;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	padding: 5px;
	transition: top 0.15s ease-out;
}

.finder.active {
	top: 0;
}

.finder-input {
	flex-grow: 1;
	width: 0;
	height: 40px;
	border: none;
	padding: 8px;
	outline: none !important;
}

.finder-input.not-found {
	color: #e7353f;
}

.btn-finder {
	width: 40px;
	height: 40px;
	text-align: center;
	padding: 0;
}

.finder-input,
.btn-finder:not(:last-child) {
	margin-right: 5px;
}

.finder-count {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #888;
	border-right: 1px solid #e5e5e5;
	margin-right: 5px;
	padding-right: 20px;
	white-space: nowrap;
}

.btn-finder,
.finder-count {
	flex-shrink: 0;
	flex-grow: 0;
}

.highlight {
	background: #ff8;
}

.highlight.active {
	background: #ffd71b;
}

Integrate jQuery Finder Plugin to Search Text

The Finder plugin requires Highlight JS and ScrollTo  JS in order to highlight and scroll to the matched words. So, load these 3 plugins in the following order.

<!-- Highlight JS -->
<script src="jquery.highlight.js"></script>
<!-- ScrollTo JS -->
<script src="jquery.scrollto.js"></script>
<!-- Finder JS -->
<script src="jquery.finder.js"></script>

Basically, the plugin automatically activated after including all assets. However, if you want to initialize the plugin separately, use the following syntax.

$(document).ready(function () {
	$(finder.activator).click(function() {
		finder.activate();
});

That’s all! I hope this jQuery plugin fulfills your needs to search text on the page. If you have any questions or need further help related to this plugin, feel free to comment below.