autosuggest-highlight

3.3.4last stable release 3 years ago
Complexity Score
Low
Open Issues
N/A
Dependent Projects
137
Weekly Downloadsglobal
326,518

Downloads

Readme

Autosuggest Highlight

Utilities for highlighting text in autosuggest and autocomplete components.

Installation

yarn add autosuggest-highlight

or

npm install autosuggest-highlight --save

API

Function Description match(text, query, options) Calculates the characters to highlight in text based on query. parse(text, matches) Breaks the given text to parts based on matches.

match(text, query, options)

Calculates the characters to highlight in text based on query.

It returns an array of pairs. Every pair [a, b] means that text.slice(a, b) should be highlighted.

Options are passed as JSON.

Option Description insideWords boolean false by default. Searches inside words findAllOccurrences boolean false by default. Finds all occurrences of each match requireMatchAll boolean false by default. Requires each word of query to be found in text or else returns an empty set

Examples

We match at the beginning of a word by default:

var match = require('autosuggest-highlight/match');

// text indices:     012345678
// highlighting:          vv
var matches = match('some text', 'te'); // [[5, 7]]
// text indices:     012345678
// highlighting:
var matches = match('some text', 'e'); // []

Enable search inside words:

var match = require('autosuggest-highlight/match');

// text indices:     012345678
// highlighting:       v
var matches = match('some text', 'm', { insideWords: true }); // [[2, 3]]

When query is a single word, only the first match is returned by default:

// text indices:     012345678901234
// highlighting:     v
var matches = match('some sweet text', 's'); // [[0, 1]]

You’ll get the second match, if query contains multiple words:

// text indices:     012345678901234
// highlighting:     v    v
var matches = match('some sweet text', 's s'); // [[0, 1], [5, 6]]

Or using the findAllOccurrences option:

// text indices:     012345678901234
// highlighting:     v    v
var matches = match('some sweet text', 's', { findAllOccurrences: true }); // [[0, 1], [5, 6]]

Matches are case insensitive:

// text indices:     012345678
// highlighting:          v
var matches = match('Some Text', 't'); // [[5, 6]]

and diacritics are removed:

// text indices:     0123456
// highlighting:     vvvv
var matches = match('Déjà vu', 'deja'); // [[0, 4]]

When query has multiple words, the order doesn’t matter:

// text indices:     012345678901234
// highlighting:     v      v
var matches = match('Albert Einstein', 'a e'); // [[0, 1], [7, 8]]
// text indices:     012345678901234
// highlighting:     v      v
var matches = match('Albert Einstein', 'e a'); // [[0, 1], [7, 8]]

parse(text, matches)

Breaks the given text to parts based on matches.

It returns an array of text parts by specifying whether each part should be highlighted or not.

For example:

var parse = require('autosuggest-highlight/parse');

// text indices:   0123456789012345
// highlighting:          vv   v
var parts = parse('Pretty cool text', [[7, 9], [12, 13]]);
/*
  [
    {
      text: 'Pretty ',
      highlight: false
    },
    {
      text: 'co',
      highlight: true
    },
    {
      text: 'ol ',
      highlight: false
    },
    {
      text: 't',
      highlight: true
    },
    {
      text: 'ext',
      highlight: false
    }
  ]
*/

Usage with old browsers

For using this library with old browsers such as IE11 you must change import to

var match = require('autosuggest-highlight/ie11/match');
var parse = require('autosuggest-highlight/ie11/parse');

License

MIT

Dependencies

Loading dependencies...

CVE IssuesActive
0
Scorecards Score
2.90
Test Coverage
No Data
Follows Semver
Yes
Github Stars
300
Dependenciestotal
19
DependenciesOutdated
8
DependenciesDeprecated
0
Threat Modelling
No Data
Repo Audits
No Data

Learn how to distribute autosuggest-highlight in your own private NPM registry

npm config set registry  https://npm.cloudsmith.com/owner/repo
Processing...
Done
npm install autosuggest-highlight
Processing...
Done

16 Releases

NPM on Cloudsmith

Getting started with NPM on Cloudsmith is fast and easy.