jQuery Plugin To Highlight Glossary Terms In The Document - autoabbr.js

autoabbr.js is a tiny, fast JQuery plugin used for highlighting words (typically Glossary Terms) defined in the JavaScript by automatically wrapping them into the HTML abbr tags with title attribute.

How to use it:

1. Add the glossary terms with custom definitions you want to highlight in a JSON file as this:

// words.json
{
  "ipsum": "test word 1",
  "varius": "test word 2",
  "maecenas": "test word 3",
  ...
}

2. The plugin also supports JavaScript Wildcard just like the Regular Expression pattern.

// words.json
{
  "ipsum": "test word 1",
  "varius": "test word 2",
  "maecenas": "test word 3",
  "cura*": "test wildcard",
  ...
}

3. Put jQuery library and the jQuery autoabbr.js plugin into the html page when required.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="autoabbr.min.js"></script>

4. Initialize the plugin and specify the path to the JSON file.

$('body').autoabbr({
  src: 'words.json'
});

5. Style the highlighted terms in the CSS as this:

.definition {
  background: #FF9;
  color: #222;
  padding: 0 5px;
  border-radius: 3px;
}

6. Default plugin options:

$('body').autoabbr({

  // The element to use around definitions.
  'defTag': 'abbr',             

  // The attribute name to use for the word's key. Empty string to omit.
  'attrKey': 'data-definition', 

  // The attribute name to use for the word's definition. Empty string to omit.
  'attrDef': 'title',           

  // A class to attach to your definition elements. Empty string to omit.
  'addClass': 'definition',     

  // Whether or not to include the word itself in the definition attr, format 'word: definition'
  'includeWord': 'true',        

  // A function to run once glossary tags have been added
  'onComplete': null            
  
});

---

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