Skip to content

A versatile hit highlighter for search engines running in the browser and Node.js. Highlights query words and truncate result if necessary. Language agnostic.

License

Notifications You must be signed in to change notification settings

eklem/hit-highlighter

Repository files navigation

hit-highlighter

NPM version NPM downloads MIT License Build Status JavaScript Style Guide

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. Browser demo

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 '

About

A versatile hit highlighter for search engines running in the browser and Node.js. Highlights query words and truncate result if necessary. Language agnostic.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published