Package Exports

regexify-string

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 (regexify-string) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

regexify-string

The way to decorate string by using regex with: React components, HTML tags etc

perfectly works with: strings, html tags, react, react-native

Install

$ npm install --save regexify-string

API

regexifyString({ pattern, decorator, input })

pattern

Type: RegExp

decorator

Type: (match: string, index: number) => string | JSX.Element

match string you would like to replace/decorate with something
index index number of the current match

NOTE: Try do not forget to use keys for React collections if needed

input

Type: string

Usage

with strings

    const result = regexifyString({
        pattern: /\[.*?\]/gim,
        decorator: (match, index) => {
            return `<${match}>`;
        },
        input: 'some [text] with simple example',
    });

    console.log(result);
    // ['some ', '<[text]>', ' with simple example']

with index keys

    const result = regexifyString({
        pattern: /\[.*?\]/gim,
        decorator: (match, index) => {
            switch (index) {
                case 0: return `<FIRST ${match}>`;
                case 1: return `<SECOND ${match}>`;
                case 2: return `<THIRD ${match}>`;
                default: return match;
            }
        },
        input: 'Important text with [first link] and [second link] and much more [links]',
    });

    console.log(result);
    /*
        [
            'Important text with ',
            '<FIRST [first link]>',
            ' and ',
            '<SECOND [second link]>',
            ' and much more ',
            '<THIRD [links]>',
        ]
    */

with html

    const result = regexifyString({
        pattern: /\[.*?\]/gim,
        decorator: (match, index) => {
            return <span>{match}</span>;
        },
        input: 'some [text] with simple example',
    });

    console.log(result);
    // ['some ', <span>[text]</span>, ' with simple example']

with React / React Native components

    regexifyString({
        pattern: /\[.*?\]/gim,
        decorator: (match, index) => {
            return (
                <Link
                    to={SOME_ROUTE}
                    onClick={onClick}
                >
                    {match}
                </Link>
            );
        },
        input: DisclaimerData.body,
    });

    regexifyString({
        pattern: /\[.*?\]/gim,
        decorator: (match, index) => {
            return <React.Fragment>{match}</React.Fragment>;
        },
        input: 'some [text] with simple example',
    });

regexify-string

Package Exports

Readme

regexify-string

Install

API

regexifyString({ pattern, decorator, input })

pattern

decorator

input

Usage

with strings

with index keys

with html

with React / React Native components

License