JavaScript Library For Search Query Matching and Highlighting – highlight-words

Preview:

Description:

A lightweight and fast JavaScript library designed to highlight matched search queries in the text so users can quickly locate the information they’re seeking.

It’s done by splitting text into multiple chunks based on a search query, making it easy to highlight matches afterward. It supports both static and regex queries, providing you with the flexibility to handle various search scenarios.

How to use it:

1. Install and import the highlight-words.

# Yarn
$ yarn add highlight-words
# NPM
$ npm i highlight-words

import highlightWords from 'highlight-words';

// OR
<script type="module">
  import highlightWords from 'https://cdn.jsdelivr.net/npm/high[email protected]/dist/highlight-words.min.mjs';
</script>

2. Split your text into chunks based on a search query.

const chunks = highlightWords({
  text: 'CSS Script Com',
  query: 'Script' // or Regex e.g. /(CSS|Script|)/
});

// result
[
  {
    key: 'unique id here'
    text: 'CSS ',
    match: false
  },
  {
    key: 'unique id here';
    text: 'Script',
    match: true
  },
  {
    key: 'unique id here';
    text: ' Com',
    match: false
  }
]