react-markup-string

Find a specified string from the entire string, and replace it with a specified JSX.Element

Installation

npm i react-markup-string

Usage

For example, if you want to replace a url in a string with <a> JSX.Element

You can write your code with Markup component like this (TypeScript) (see in CodeSandbox)

const text = 'This url https://test.com should be replaced';

const regExp = /https?:\/\/[a-zA-Z0-9/.?_%=\\-]+/g;

const markuper = (matchText: string, key: number) => <a href={matchText} key={key}>{matchText}</a>;

const markuped = (
    <Markup regExp={regExp} markuper={markuper}>
        {text}
    </Markup>
);
/**
 * This url <a href="https://test.com">https://test.com</a> should be replaced
 */

If you also want to replace \n with <br> JSX.Element

Add regular expression to regExp and if statement to markuper()

const text = 'https://test.com\nhttps://example.com';

// Add \n with |
const regExp = /https?:\/\/[a-zA-Z0-9/.?_%=\\-]+|\n/g;

// Add if statement to mark up the text with different elements
const markuper = (matchText: string, key: number) => {
    if (matchText.startsWith('http')) {
        return (
            <a href={matchText} key={key}>
                {matchText}
            </a>
        );
    } else {
        return <br key={key} />;
    }
};

const markuped = (
    <Markup regExp={regExp} markuper={markuper}>
        {text}
    </Markup>
);

Custom matcher

You can also use custom matcher. This is useful if there is some condition that is difficult to express in regular expression.

const text = 'https://test.net & https://forbidden.org';

const allowedDomains = ['test.net', 'example.com', 'experiment.xyz'];

const matcher = (text: string) => {
    const regExp = /https?:\/\/([a-zA-Z0-9.]+)\/?[a-zA-Z0-9/.?_%=\\-]*/g;

    const result: MatchResult[] = [];

    let match: RegExpExecArray | null;

    while ((match = regExp.exec(text)) !== null) {
        if (allowedDomains.includes(match[1])) {
            result.push({
                index: match.index,
                text: match[0]
            });
        }    
    }

    return result;
};

const markuper = (matchText: string, key: number) => (
    <a href={matchText} key={key}>
        {matchText}
    </a>
);

const markuped = (
    <Markup matcher={matcher} markuper={markuper}>
        {text}
    </Markup>
);
/** 
 * <a href="https://test.net">https://test.net</a> & https://forbidden.org
 */