Create a gist now

Instantly share code, notes, and snippets.

Live on-page text highlighting
highlight v3
Highlights arbitrary terms.
MIT license.
Johann Burkard
jQuery.fn.highlight = function(pat) {
function innerHighlight(node, pat) {
var skip = 0;
if (node.nodeType == 3) {
var pos =;
if (pos >= 0) {
var spannode = document.createElement('span');
spannode.className = 'highlight';
var middlebit = node.splitText(pos);
var endbit = middlebit.splitText(pat.length);
var middleclone = middlebit.cloneNode(true);
middlebit.parentNode.replaceChild(spannode, middlebit);
skip = 1;
else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
for (var i = 0; i < node.childNodes.length; ++i) {
i += innerHighlight(node.childNodes[i], pat);
return skip;
return this.each(function() {
innerHighlight(this, pat.toUpperCase());
jQuery.fn.removeHighlight = function() {
return this.find("span.highlight").each(function() {
with (this.parentNode) {
replaceChild(this.firstChild, this);
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" xml:lang="en" lang="en">
<title>On-Page Text Search</title>
<style type="text/css">
.highlight {
background-color: #fff34d;
-moz-border-radius: 5px; /* FF1+ */
-webkit-border-radius: 5px; /* Saf3-4 */
border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */
.highlight {
padding:1px 4px;
margin:0 -4px;
Search: <input type="text" id="text-search" />
<p><b>Web development</b> is a broad term for the work involved in developing a <a href="/wiki/Web_site" title="Web site" class="mw-redirect">web site</a> for the Internet (<a href="/wiki/World_Wide_Web" title="World Wide Web">World Wide Web</a>) or an <a href="/wiki/Intranet" title="Intranet">intranet</a> (a private network). This can include <a href="/wiki/Web_design" title="Web design">web design</a>, <a href="/wiki/Web_content_development" title="Web content development" class="mw-redirect">web content development</a>, client liaison, <a href="/wiki/Client-side_scripting" title="Client-side scripting">client-side</a>/<a href="/wiki/Server-side_scripting" title="Server-side scripting">server-side</a> <a href="/wiki/Programming" title="Programming" class="mw-redirect">scripting</a>, <a href="/wiki/Web_server" title="Web server">web server</a> and <a href="/wiki/Network_security" title="Network security">network security</a> configuration, and <a href="/wiki/E-commerce" title="E-commerce" class="mw-redirect">e-commerce</a> development. However, among web professionals, "web development" usually refers to the main non-design aspects of building web sites: writing <a href="/wiki/Markup_language" title="Markup language">markup</a> and <a href="/wiki/Computer_programming" title="Computer programming">coding</a>. Web development can range from developing the simplest static single page of <a href="/wiki/Plain_text" title="Plain text">plain text</a> to the most complex web-based <a href="/wiki/Internet_application" title="Internet application" class="mw-redirect">internet applications</a>, <a href="/wiki/Electronic_business" title="Electronic business">electronic businesses</a>, or <a href="/wiki/Social_network_service" title="Social network service">social network services</a>.</p>
<p>For larger organizations and businesses, web development teams can consist of hundreds of people (<a href="/wiki/Web_developer" title="Web developer">web developers</a>). Smaller organizations may only require a single permanent or contracting <a href="/wiki/Webmaster" title="Webmaster">webmaster</a>, or secondary assignment to related job positions such as a <a href="/wiki/Graphic_designer" title="Graphic designer">graphic designer</a> and/or <a href="/wiki/Information_systems" title="Information systems" class="mw-redirect">information systems</a> technician. Web development may be a collaborative effort between departments rather than the domain of a designated department.</p>
(Text from <a href="">Wikipedia</a>)
<script type="text/javascript" src="
<script type="text/javascript" src="highlight.js"></script>
<script type="text/javascript">
$(function() {
$('#text-search').change(function(ev) {
// pull in the new value
var searchTerm = $(this).val();
// remove any old highlighted terms
// highlight the new term
$('body').highlight( searchTerm );
kizdolf commented Feb 25, 2016

that's nice really!

ahmed205 commented Apr 9, 2016

Nice and useful.

but is there a chance to make click to get next value?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment