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

Category: Javascript , Text | March 19, 2023
Author:tricinel
Views Total:50 views
Official Page:Go to website
Last Update:March 19, 2023
License:MIT

Preview:

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

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
  }
]

You Might Be Interested In:


Leave a Reply