Search And Highlight Keywords In Text - jQuery seekAndWrap

seekAndWrap is a jQuery plugin which searches characters in your text and wrap them in a container element with custom CSS classes and HTML attributes. Useful for highlighting important words within a larger body of text.

How to use it:

1. Link to jQuery JavaScript library and the jQuery seekAndWrap plugin's script.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="seek-and-wrap.js"></script>

2. Initialize the seekAndWrap plugin and specify the character you want to highlight.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

$("body").seekAndWrap({
  "search":"dolor"
});

3. By default the plugin will wrap the word 'dolor' in a DIV element as this:

<p>Lorem ipsum <div class="keyword"></div> dolor sit amet, consectetur adipiscing elit. </p>

4. Override the default wrapping element.

$("body").seekAndWrap({
  "tag":"div",
  "search":"dolor"
});

5. Override the default CSS class added to the highlighted text.

$("body").seekAndWrap({
  "class":"keyword",
  "search":"dolor"
});

6. Add custom HTML attributes to the highlighted text.

$("body").seekAndWrap({
  attribs" : [
    {"title" : "Title"},
    ...
  ],
  "search":"dolor"
});

7. Determine if is case insensitive.

$("body").seekAndWrap({
  "insensitive": true
});

Change log:

2017-10-08

• Add 'insensitive case' parameter

---

This awesome jQuery plugin is developed by lebleut. For more Advanced Usages, please check the demo page or visit the official website.