Highlighting text on the Web is very useful when reading, searching, comparing, emphasizing specific text on a Web page to share online with friends or summarize content by highlighting key phrases. So here are 10 Best Text Highlighter Javascript Libraries that let you to highlight specific text, add search keyword highlighting to any webpage, add notes and comments inline with your highlights.
Web Highlighter
It’s from an idea: highlight texts on the website and save the highlighted areas just like what you do in PDF.
Lumin
A JavaScript library to progressively highlight any text on a page. Great for when you want users to pay attention to some important text. It can also be used to show progress of a task – Read something while tasks are being completed.
Hrjs
Tiny JavaScript plugin for highlighting and replacing text in the DOM.
Jsdiff
A javascript text differencing implementation. It is great tool for comparing two text values on a web page and highlight the differences.
Texthighlighter
TextHighlighter allows you to highlight text on web pages.
Mark.js
mark.js is a text highlighter written in JavaScript. It can be used to dynamically mark search terms or custom regular expressions and offers you built-in options like diacritics support, separate word search, custom synonyms, iframes support, custom filters, accuracy definition, custom element, custom class name and more.
Fokus
Fokus uses JavaScript to emphasize anything you select by covering the rest of the page with semi-transparent black. The library has no dependencies and weighs in at around 3kb. A <canvas> element is used to paint the cut-out cover. Works in most modern browsers except IE and touch devices.
Tinyq
A zero dependency JS plugin which allows readers to highlight text within a web page and task some action.
Custom Highlight
Custom Highlight is a simple jQuery plugin that allows you to build your own custom text highlight actions. Like the wysiwig you see on the Medium editor.
React Highlight Words
React component to highlight words within a larger body of text.
Vue Text Highlight
Text highlighter library for Vue.js.
Highlight Ta
Highlight text inside a textarea with vanilla JS. Highlight-Ta is a stand-alone script that uses a regular expressions, strings, and functions to highlight text inside a textarea. It also adjusts that textarea’s height to fit its text while following CSS declarations like box-sizing, padding, and min/max height. Highlight-Ta was created for designers and developers who need to highlight text in a textarea without relying on jQuery or weighty third-party libraries.