highlight-matches-utils

> Utility functions to mark and highlight character matches in text


See an online example in CodeSandbox on how it can be used.

API

For more in-depth examples, check the test file.
For more in-depth documentation, check the TypeScript definition file.

$3

Calls the given functions on matching and non-matching characters
of the given text. Useful when you want to highlight matching characters
in a UI.

``ts
export function highlightChars(
text: string,
chars: string,
matchesWrapper: (
s: string,
index: number,
array: {
isMatch: boolean
str: string
}[]
) => T,
noMatchesWrapper?: (
s: string,
index: number,
array: {
isMatch: boolean
str: string
}[]
) => T
): T[]
`

Example:

`js
import React from 'react'
import chalk from 'chalk'
import { highlightChars } from 'highlight-matches-utils'

highlightChars('How are you?', 'are', s => (${s}))
// => ['How ', '(are)', ' you?']

highlightChars('How are you?', 'are', (s, i) => {s})
// => ['How ', are, ' you?']

highlightChars('How are you?', 'are', chalk.reset, chalk.gray)
// =>
// [
// "How ",
// "are",
// " you?",
// ]
// (useful for highlighting CLI output)
`

$3

Calls the given functions on matching and non-matching characters
of the given text. Useful when you want to highlight matching characters
in a UI.

> NOTE: You can get the matches by calling fuzzaldrin-plus's .match() function.

`ts
export function highlightMatches(
text: string,
matches: number[],
matchesWrapper: (
s: string,
index: number,
array: {
isMatch: boolean
str: string
}[]
) => T,
noMatchesWrapper?: (
s: string,
index: number,
array: {
isMatch: boolean
str: string
}[]
) => T
): T[]
`

$3

Splits the given text in separate chunks grouping together
all the characters that are matches and not matches.

> NOTE: You can get the matches by calling fuzzaldrin-plus's .match() function.

`ts
export function splitMatches(
text: string,
matches: number[]
): Array<{| isMatch: boolean, str: string |}>
``

$3

- https://github.com/bvaughn/react-highlight-words
- https://github.com/bvaughn/highlight-words-core
- https://github.com/desktop/desktop/blob/23ddc3aceae0e051a125a934cc322d5ea0db0ebb/app/src/ui/lib/highlight-text.tsx
- https://markjs.io/