highlight-search-term

A JavaScript library that highlights search terms in a page without modifying the DOM.

GitHub - Npm

Usage

import { highlightSearchTerm } from 'highlight-search-term';

highlightSearchTerm({ search: 'lorem', selector: '.content' });

The search is case insensitive.

Example

Use the following search input to highlight the search term in the content below:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

In ac felis eget est consequat sagittis nec commodo tellus. Donec aliquam lacus vehicula urna scelerisque gravida sed ut felis. Cras eget vehicula ex. Nullam sed justo id leo euismod faucibus. Vestibulum tincidunt in felis nec rutrum. In lobortis dictum augue non luctus. Quisque egestas neque at maximus placerat. Duis ornare dictum suscipit. Vivamus molestie est et ultricies finibus.

Phasellus id magna in enim vulputate luctus. Curabitur nec enim non nisl vulputate cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget mi malesuada, dapibus magna ut, aliquam ipsum. Donec eleifend hendrerit nibh, a euismod neque ultrices hendrerit. Aenean id ipsum sit amet quam iaculis posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean malesuada ultrices sapien quis pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc non lacus eget nibh finibus ullamcorper fringilla vel sem. Duis sollicitudin sem ac libero imperdiet, nec laoreet erat scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum nec ligula vulputate nisi venenatis rutrum.

Aenean eget bibendum urna. Quisque eget porttitor tellus, ac tempor neque. Vivamus eleifend, eros non suscipit ultricies, felis mi cursus ex, dignissim convallis tellus est sed sem. Duis est nisl, tincidunt vel enim nec, gravida porttitor ipsum. Maecenas dictum id mi non condimentum. Sed at metus enim. Nullam vel tristique justo, ac porta urna. Aliquam ullamcorper fringilla vehicula. Praesent ac sem euismod, scelerisque ligula eu, venenatis felis. Fusce efficitur metus vel magna fringilla convallis et a ex. Nulla maximus libero turpis, ac euismod nisl facilisis sit amet. Quisque faucibus consectetur laoreet. Etiam at vulputate mi. Pellentesque sed lectus rhoncus, rhoncus sem sit amet, faucibus neque. Aliquam non auctor libero, vehicula hendrerit tortor.

Limitations

This library uses the CSS Custom Highlight API, which works on all evergreen browsers except Firefox.

License

MIT