jQuery Search Text on Page and Highlight

Category: Text & Input | September 14, 2020
Author: dannymcgee
Official Page: Go to Website
Last Update: September 14, 2020
License: MIT

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

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>

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;

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

.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() {

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.

You Might Be Interested In:

5 thoughts on “jQuery Search Text on Page and Highlight”

  1. Hi I want the search to auto scroll to the highlighted text. It only does so with the phone on the app class. When I remove the phone part then it no longer autoscrolls to the highlighted text

  2. Hi there. Thank you so much for this. I am hoping to use this at the top of a content area of a page (beneath the headline and banner). I have implemented the script, and highlighting is working properly and looks great, but I can’t seem to negotiate the scrolling. My HTML is a bit different, but I believe I’ve accounted for everything. Here’s that HTML…

    I have tried swapping around the order of the divs, but it doesn’t seem to make a difference (this is on a development site, so I can’t share access, unfortunately).

    I am happy to send you links to Dropbox files with code and screen recordings, if that’s helpful, but your security settings won’t let me paste the HTML.

  3. I have a problem with closing of the search bar. When the x is clicked it just shuffles down a bit and then moves back up when the magnifying class is clicked again.


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.