Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eklem/hit-highlighter
A versatile hit highlighter for search engines running in the browser and Node.js. Highlights query words and truncate result if necessary. Language agnostic.
https://github.com/eklem/hit-highlighter
highlight search-engines
Last synced: 22 days ago
JSON representation
A versatile hit highlighter for search engines running in the browser and Node.js. Highlights query words and truncate result if necessary. Language agnostic.
- Host: GitHub
- URL: https://github.com/eklem/hit-highlighter
- Owner: eklem
- License: mit
- Created: 2019-08-26T10:26:07.000Z (about 5 years ago)
- Default Branch: trunk
- Last Pushed: 2024-09-28T04:42:30.000Z (about 1 month ago)
- Last Synced: 2024-10-09T13:53:36.265Z (28 days ago)
- Topics: highlight, search-engines
- Language: JavaScript
- Homepage:
- Size: 1.81 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# hit-highlighter
[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-url]
[](https://www.jsdelivr.com/package/npm/hit-highlighter)
[![MIT License][license-image]][license-url]
[![Build Status][build-image]][build-url]
[![JavaScript Style Guide][standardjs-image]][standardjs-url]
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](https://github.com/eklem/words-n-numbers) for extracting words (and numbers) from a string of text.
Also part of [daq-proc](https://github.com/eklem/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 `` tag.
## Browser demo
Check out the [demo](https://eklem.github.io/hit-highlighter/demo/) to better understand how the hit-highlighter works.
[](https://eklem.github.io/hit-highlighter/demo/)
## Initialize
### UMD / Browser
```HTML
<script src="https://cdn.jsdelivr.net/npm/hit-highlighter/dist/hit-highlighter.umd.min.js">
//hh.highlight() available
```
### CJS
```javaScript
const { highlight } = require ('hit-highlight')
// highlight() available
```
### ESM
```javaScript
import { highlight } from 'hit-highlight'
// highlight() available
```
## Usage
```javaScript
highlight([query array], [item array], {prpoerties})
```
`query` and `item` are arrays of words. `properties` is optional to define, since you have defaultProperties:
```javaScript
defaultProperties = {
itemMaxWords: 0,
truncateStart: '',
truncateEnd: '',
hitPaddingMin: 5,
highlightStart: '',
highlightEnd: '',
divider: ' '
}
```
If you want to overwrite anything, i.e. maximum words to show in an item, you can do:
```javaScript
hightlight([query array], [item array], {itemMaxWords: 100})
```
### Default highlighting
```javaScript
const query = ['interesting', 'words']
const item = ['some', 'interesting', 'words', 'to', 'remember']
highlight(query, item)
// returns:
// 'some interesting words to remember '
```
### Custom highlight.start and .end
```javaScript
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
```javaScript
const query = ['no', 'hits']
const item = ['some', 'interesting', 'words', 'to', 'remember']
highlight(query, item)
// returns:
// 'some interesting words to remember '
```
[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat
[license-url]: LICENSE
[npm-url]: https://npmjs.org/package/hit-highlighter
[npm-version-image]: https://img.shields.io/npm/v/hit-highlighter.svg?style=flat
[npm-downloads-image]: https://img.shields.io/npm/dm/hit-highlighter.svg?style=flat
[build-url]: https://github.com/eklem/hit-highlighter/actions/workflows/tests.yml
[build-image]: https://github.com/eklem/hit-highlighter/actions/workflows/tests.yml/badge.svg
[standardjs-url]: https://standardjs.com
[standardjs-image]: https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square