November's Paddleball Marathon

    @brianmcallister/highlight-text
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.4 • Public • Published

    @brianmcallister/highlight-text

    codecov CircleCI npm version

    Highlight words in some text

    highlight-text makes highlighting words and characters in a string quick and easy. This library is primarily used for adding a visual indicator to any text in a web page, much like the default search feature in your browser.

    This is a great way to highlight search results collected from an input field within your application, or a range of possible use cases:

    • User configured search terms in a chat application
    • Administrator configured announcements
    • Visual design elements

    By default, the library will accept a string and some sub strings to search for. It will return all of the found strings surrounded by <mark> tags, which can then be styled to match your branding. This is configurable, in case you want to use any arbitrary string or HTML tag.

    Table of contents

    Demo

    Hosted demo: https://highlight-text.netlify.com/

    You can also run the demo locally. To get started:

    git clone git@github.com:brianmcallister/highlight-text.git
    cd highlight-text/demo
    npm i
    npm start
    ⇡ Top

    Installation

    npm install @brianmcallister/highlight-text
    ⇡ Top

    Usage

    import highlightText from '@brianmcallister/highlight-text';
    
    highlightText('some text', ['om', 'ex']);
    // #=> 's<mark>om</mark>e t<mark>ex</mark>t'
    ⇡ Top

    API

    highlightText

    This is the default export. Use this function to highlight words in text.

    highlightText(text: string, words: string[]): string;
    ⇡ Top

    Install

    npm i @brianmcallister/highlight-text

    DownloadsWeekly Downloads

    402

    Version

    2.0.4

    License

    MIT

    Unpacked Size

    35.7 kB

    Total Files

    18

    Last publish

    Collaborators

    • brianmcallister