Skip to content

Utility functions to mark and/or highlight character matches in texts

License

Notifications You must be signed in to change notification settings

reyronald/highlight-matches-utils

Repository files navigation

highlight-matches-utils

Utility functions to mark and highlight character matches in text

Travis (.org) Codecov GitHub npm bundle size (minified) npm bundle size (minified)

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.

highlightChars

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)

highlightMatches

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.

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[]

splitMatches

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.

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

Prior Art

About

Utility functions to mark and/or highlight character matches in texts

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published