highlight-matches-utils
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    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: (
        sstring,
        indexnumber,
        array{
          isMatch: boolean
          str: string
        }[]
      ) => T,
      noMatchesWrapper?: (
        sstring,
        indexnumber,
        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: (
        sstring,
        indexnumber,
        array{
          isMatch: boolean
          str: string
        }[]
      ) => T,
      noMatchesWrapper?: (
        sstring,
        indexnumber,
        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

    Install

    npm i highlight-matches-utils

    DownloadsWeekly Downloads

    41

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    16.3 kB

    Total Files

    8

    Last publish

    Collaborators

    • reyronald