Word & Character Highlighter In jQuery – TUS.Marker

Text
File Size: 1.9 KB
Views Total: 494 views
Last Update:October 21, 2021
Publish Date: March 04, 2017
Official Website: Go to website
License: MIT
Plugin Author: uekichinos
Demo    Download

A Free jQuery Plugin with TUS.Marker is light weight & easy to use. This jQuery plugin to highlight heading or any words, paragraphs or any other characters in strings within content. Display Eyecatch words for help mostly importants. You can use web or mobile site for long content.

Related : Keyword Search Highlighting Plugin In jQuery – mark.js

Plugin Parameters :

  1. text – keyword to highlighted.
  2. css – define class name for css purpose.
  3. caseSensitive – to control case sensitive during search. default true.
  4. inWord – to find keyword within string. default false.

How to use :

Add the jquery.textmarker.js after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.tusmarker.js"></script>

Add HTML & add which content for highlight .

<div id="content1"><p>Although the Internet has been widely used by academia since the 1980s, the commercialization incorporated its services and technologies into virtually every aspect of modern human life.The origins of the Internet date back to research commissioned by the United States government in the 1960s to build robust, fault-tolerant communication via computer networks. The primary precursor network, the ARPANET, initially served as a backbone for interconnection of regional academic and military networks in the 1980s. The funding of a new U.S. backbone by the National Science Foundation in the 1980s, as well as private funding for other commercial backbones, led to worldwide participation in the development of new networking technologies, and the merger of many networks.[3] The linking of commercial enterprises by the early 1990s marks the beginning of the transition to the modern Internet, and generated a sustained exponential growth as generations of institutional, personal, and mobile computers were connected to the network.</p></div>

Highlight words in paragraphs and apply a custom CSS class to the matched words.

$('#content1').textmarker({
  text: "as",
  css: "highlight",
  caseSensitive: true,
  inWord: false,
});

 Then you can apply custom styles to the words.

.highlight {
  font-weight: bold;
  color:#fff;
  background: #4F46E5;
  padding: 2px;
  border-radius: 2px;
}

Done

List Of Version :
  • v1.0.1
  • 1.0

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.