hit-highlighter

A small and versatile hit highlighter for search engines running in the browser and Node.js. Language agnostic, meaning it supports all languages that can be split into words with code.

Takes a query array and where the values matches within the search result array, it adds hightight code. Goes well with words'n'numbers for extracting words (and numbers) from a string of text.

Also part of daq-proc, which is meant as a hassle free document and query processor for search engines running in the browser.

Breaing change

API is changed, both how to import for CJS and ESM and how to reference when using <script> tag.

Browser demo

Check out the demo to better understand how the hit-highlighter works.

Initialize

UMD / Browser

<script src="https://cdn.jsdelivr.net/npm/hit-highlighter/dist/hit-highlighter.umd.min.js"></script>

<script>
  //hh.highlight() available
</script>

CJS

const { highlight } = require ('hit-highlight')
// highlight() available

ESM

import { highlight } from 'hit-highlight'
// highlight() available

Usage

highlight([query array], [item array], {prpoerties})

query and item are arrays of words. properties is optional to define, since you have defaultProperties:

defaultProperties = {
  itemMaxWords: 0,
  truncateStart: '<span class="truncated">',
  truncateEnd: '</span>',
  hitPaddingMin: 5,
  highlightStart: '<span class="hitHighlight">',
  highlightEnd: '</span>',
  divider: ' '
}

If you want to overwrite anything, i.e. maximum words to show in an item, you can do:

hightlight([query array], [item array], {itemMaxWords: 100})

Default highlighting

const query = ['interesting', 'words']
const item = ['some', 'interesting', 'words', 'to', 'remember']

highlight(query, item)

// returns:
// 'some <span class="hitHighlight">interesting words</span> to remember '

Custom highlight.start and .end

const query = ['interesting', 'words']
const item = ['some', 'interesting', 'words', 'to', 'remember']
const properties = { highlightStart: '**', highlightEnd: '**' }

highlight(query, item, properties)

// returns:
// 'some **interesting words** to remember '

No hits, returing item untouched

const query = ['no', 'hits']
const item = ['some', 'interesting', 'words', 'to', 'remember']

highlight(query, item)

// returns:
// 'some interesting words to remember '