TextHighlighter

Getting started

Using the library as an npm package

Install the library:

$ npm install @perlego/text-highlighter

And use it!

import TextHighlighter from '@perlego/text-highlighter';
var hltr = new TextHighlighter(document.body);
                    

Using the library as a script in your web pages

Clone the TextHighlighter directly from GitHub.

$ git clone git@github.com:Perlego/texthighlighter.git

Ensure grunt is installed globally along with all the dev npm dependencies.

$ npm install

$ npm install -g grunt

Build the library.

$ npm run build

Copy the build/prod/TextHighlighter.min.js file into your project.

Add script file to head section of your web page:

<script type="text/javascript" src="TextHighlighter.min.js"></script>

And use it!

var hltr = new TextHighlighter(document.body);

For more details see API reference or Wiki pages on GitHub.

Also check Demos section below for examples of usage.

Features

• Highlighting of selected text.
• Highlighting all occurrences of given text (find & highlight).
• Removing highlights.
• Selecting highlight color.
• Serialization & deserialization.
• Focusing & deselecting overlapping highlights.
• Works well in iframes.
• Keeps DOM clean.
• No dependencies (apart from core-js and regenerator-runtime for IE11). No jQuery or other libraries needed.

Compatibility

Should work in all decent browsers and IE 11. IE 11 only works if you use core-js and regenerator-runtime polyfills in your project, in the case you use the bundled and minified scripts, then the polyfills are provided for you.

Demos

• Simple demo
• Callbacks
• Serialization
• Serialization (Absolutely positioned elements)
• Iframe

Documentation

You may check API reference or Wiki pages on GitHub.