Package Exports

regexify-string
regexify-string/index.js

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

npm bundle size GitHub release (latest by date) npm-donwloads-per-year

regexify-string

Strings decorator (by regex) with: React components, HTML tags etc.

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

Install

$ npm install --save regexify-string

$ yarn add regexify-string

API

regexifyString({ pattern, decorator, input })

pattern

Type: RegExp

decorator

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

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

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: someVariablWithData,
    });

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

with groups

    const result = regexifyString({
        pattern: /\[(?<id>.+)\]\{(?<name>.+)\}/g,
        decorator: (match, index, result) => {
            return (
                <div
                    id={String(result?.[2])}
                    title={result?.[1]}
                />
            );
        },
        input: 'a[b]{c}',
    });

    console.log(result);
    // ['a', <div id='c' title='b' />]

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

with groups

License