JSPM

highlight-matches-utils

1.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2121
  • Score
    100M100P100Q119852F
  • License MIT

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

Package Exports

  • highlight-matches-utils

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (highlight-matches-utils) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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)
// =>
// [
//   "How ",
//   "are",
//   " you?",
// ]
// (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