I have a text (random text) like this one:
bla bla bla (name of link)[link] bla bla bla (name of link)[link]
I need to replace all of (name of link)[link] with Link React component:
<Link to={link}>name of link</Link>
What I want to see:
bla bla bla <Link to='/testRoute'>Test name</Link> bla bla bla <Link to='/testRoute'>Test name</Link>
(name of link)[link] in the text can be absent, and can meet many times.
How can I replace all matches by in the text?
Any help would be greatly appreciated.
Try to split bla bla bla (name of link)[link] bla bla bla (name of link)[link] string into an array of substrings, so you will have the following array:
const arrayOfStrings = [
'bla bla bla',
'(name of link)[link]',
'bla bla bla',
'(name of link)[link]',
];
And then you can use .map() to create new array with valid React elements:
arrayOfStrings.map((str, i) => {
const isLink = str === '(name of link)[link]';//of course you need to replace it with regex
if (isLink) {
const linkName = 'name of link';//replace it with regex, so you can get dynamic link name from str
const link = 'link';//replace it with regex, so you can get dynamic link from str
return <Link key={i} to={link}>{linkName}</Link>;
}
else {
return <span key={i}>{str}</span>;
}
});
You have to use regexify-string (npm)
npm install –save regexify-string
regexifyString({
pattern: /[.*?]/gim,
decorator: (match, index) => {
return (
<Link
to={SOME_ROUTE}
onClick={onClick}
>
{match}
</Link>
);
},
input: 'Some initial string with [link]',
});