Jquery Plugin to Highlight Word Within Content | TUS.Marker

highlight-word-text-jquery

TUS.Marker is an easy and fast jQuery text highlighting plugin to highlight words in paragraphs or characters in strings.

Parameters

  • Text – the keyword to highlight.
  • css – specify the class name for the css purpose.
  • Case Sensitive – Controls case sensitivity while searching. The default is true.
  • inWord – to find keywords within a string. default error.

Must Read: Create Colorful Text And Image Avatar Generator | JQuery Gravatar Plugin

How to make use of it:

1. Include jquery.textmarker.js after jQuery.

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

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

$('#content').tusmarker({<br>  text: "anyWord",
  css: "highlight",
});

3. Then you can apply custom patterns to the words.

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

4. Highlight words that include specific letters instead.

$('#content').tusmarker({<br>  text: "anyCharacter",
  css: "highlight",
  inWord: true,
});

5. Determine whether uppercase and lowercase letters as distinct (case-sensitive) or equivalent (case-insensitive).

$('#content').tusmarker({<br>  text: "anyCharacter",
  css: "highlight",
  inWord: true,
  caseSensitive: false,
});

See Demo And Download

Official Website(uekichinos): Click Here

This superior jQuery/javascript plugin is developed by uekichinos. For extra Advanced Usage, please go to the official website.