Utility functions to mark and highlight character matches in text
See an online example in CodeSandbox on how it can be used.
For more in-depth examples, check the test file.
For more in-depth documentation, check the TypeScript definition file.
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.
export function highlightChars<T>(
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:
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) => <mark key={i}>{s}</mark>)
// => ['How ', <mark>are</mark>, ' you?']
highlightChars('How are you?', 'are', chalk.reset, chalk.gray)
// =>
// [
// "�[90mHow �[39m",
// "�[0mare�[0m",
// "�[90m you?�[39m",
// ]
// (useful for highlighting CLI output)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
matchesby callingfuzzaldrin-plus's.match()function.
export function highlightMatches<T>(
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[]Splits the given text in separate chunks grouping together all the characters that are matches and not matches.
NOTE: You can get the
matchesby callingfuzzaldrin-plus's.match()function.
export function splitMatches(
text: string,
matches: number[]
): Array<{| isMatch: boolean, str: string |}>