The root node option for brevity.js exists as a way to limit the scope of the abbreviations you want automatically converted.
Everything inside the root node will be parsed and checked for registered abbreviations. If no root node is set, brevity.js
will use the body node by default. This will be sufficient for most cases. However, if you have a very complex
HTML document, it might be worth utilizing the root node option. For example, you could limit the script to just the content area
of the page in order to skip the header, navigation, footer, etc.
To make use of the root node option, simply pass an options object into the brevity() function as the second
parameter. Within the options object, set a property called root and assign the desired node as its value.
See the example below for a working sample.
brevity.js is vanilla javascript, not a jQuery plugin. Passing a jQuery selected object in as the root node will not work. You must pass an actual DOM node (for example, by using document.getElementById().
If you want to use jQuery, just make sure you are passing the node and not the jQuery object.
E.g: var root = $('#my-element').get(0);
1
2
3
4
5
6
<div id="my-root-id">
<p>This text is within the root node, so HTML will be abbreviated.</p>
</div>
<div>
<p>This text is <strong>NOT</strong> within the root node, so HTML will not be abbreviated.</p>
</div>
1
2
3
4
5
var abbrs = [
{ abbr: 'HTML', title: 'Hypertext Markup Language' }
];
var options = { 'root': document.getElementById('my-root-id') };
brevity(abbrs, options);
This text is within the root node, so HTML will be abbreviated.
This text is NOT within the root node, so HTML will not be abbreviated.