I'm trying to replace parts of a string with JSX tags, like so:
render: function() { result = this.props.text.replace(":",<div className="spacer"></div>); return ( <div> {result} <div> ); } But given that this.props.text is Lorem : ipsum, it results in
<div> Lorem [object Object] ipsum. </div> Is there a way to solve this or another way to replace parts of a string with JSX tags?
16 Answers
The accepted answer is 5 years old. For this problem issue #3368 was created and based on the solution provided by a Facebook employee working on React, react-string-replace was created.
Using react-string-replace, here is how you can solve your problem
const reactStringReplace = require('react-string-replace'); const HighlightNumbers = React.createClass({ render() { const content = 'Hey my number is 555:555:5555.'; return ( <span> {reactStringReplace(content, ':', (match, i) => ( <div className="spacer"></div> ))} </span> ); }, }); When you pass a JSX element to replace() as the second argument, that element is converted to a string because replace() expects a string as a second argument. What you need to do is convert your string to an array of strings and JSX elements. So your result variable should contain something like ['Lorem ', <div className="spacer"></div>, ' ipsum'].
Something like this:
function flatMap(array, fn) { var result = []; for (var i = 0; i < array.length; i++) { var mapping = fn(array[i]); result = result.concat(mapping); } return result; } var Comp = React.createClass({ render: function () { var result = 'Lorem : ipsum'; result = flatMap(result.split(':'), function (part) { return [part, <div>spacer</div>]; }); // Remove the last spacer result.pop(); return ( <div> {result} </div> ); } }); Wrote a utility function for jsx.
const wrapTags = (text: string, regex: RegExp, className?: string) => { const textArray = text.split(regex); return textArray.map(str => { if (regex.test(str)) { return <span className={className}>{str}</span>; } return str; }); }; The following should also work (assumes ES6), The only nuance is that the text is actually wrapped inside a DIV element and not preceded by it, assuming you are going to use CSS for the actual spacing this shouldn't be a problem.
const result = this.props.text.split(':').map(t => { return <div className='textItem'>{t}</div>; }); You guys are using complicated approaches, Just keep it simple:
function replaceJSX(str, find, replace) { let parts = str.split(find); for(let i = 0, result = []; i < parts.length; i++) { result.push(parts[i]); result.push(replace); } return result; } Usage
replaceJSX(variable, ":", <br />); I have come to following simple solution that does not include third party library or regex, maybe it can still help someone.
Mainly just use .replace() to replace string with regular html written as string, like:
text.replace('string-to-replace', '<span></span>') And then render it using dangerouslySetInnerHTML inside an element.
Full example:
const textToRepace = 'Insert :' // we will replace : with div spacer const content = textToRepace.replace(':', '<div></div>') : '' // then in rendering just use dangerouslySetInnerHTML render() { return( <div dangerouslySetInnerHTML={{ __html: content }} /> ) } After some research I found that existing libraries doesn't fit my requirements. So, of course, I have written my own:
It is very easy to use. Your case example:
let result = processString({ regex: /:/gim, fn: () => <div className="spacer"></div> })(this.props.test); I had the more common task - wrap all (English) words by custom tag. My solution:
class WrapWords extends React.Component { render() { const text = this.props.text; const isEnglishWord = /\b([-'a-z]+)\b/ig; const CustomWordTag = 'word'; const byWords = text.split(isEnglishWord); return ( <div> { byWords.map(word => { if (word.match(isEnglishWord)) { return <CustomWordTag>{word}</CustomWordTag>; } return word; }) } </div> ); } } // Render it ReactDOM.render( <WrapWords text="Argentina, were playing: England in the quarter-finals (the 1986 World Cup in Mexico). In the 52nd minute the Argentinian captain, Diego Maradona, scored a goal." />, document.getElementById("react") );<script src=""></script> <script src=""></script> <div></div>Nothing around WEB globe worked for me exept this solution -
Working with React, strings and doesn't have any additional dependecies
regexifyString({ pattern: /\[.*?\]/gim, decorator: (match, index) => { return ( <Link to={SOME_ROUTE} onClick={onClick} > {match} </Link> ); }, input: 'Some text with [link]', }); Something like this:
function replaceByComponent(string, component) { const variable = string.substring( string.lastIndexOf("{{") + 2, string.lastIndexOf("}}") ); const strParts = string.split(`{{${variable}}}`); const strComponent = strParts.map((strPart, index) => { if(index === strParts.length - 1) { return strPart } return ( <> {strPart} <span> {component} </span> </> ) }) return strComponent } In my case, I use React and I wanted to replace url in text with anchor tag.
In my solution, I used two library.
and wrote this code.
/* eslint-disable react/no-danger */ import React from 'react'; import { Parser } from 'simple-text-parser'; import urlRegex from 'url-regex'; type TextRendererProps = { text: string }; const parser = new Parser(); const re = urlRegex(); parser.addRule(re, (url) => { return `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`; }); export const TextRenderer: React.FC<TextRendererProps> = ({ text }) => { return ( <span dangerouslySetInnerHTML={{ __html: parser.render(text), }} /> ); }; You can easily add replacing rule by just writing parser.addRule().
If you'd also like to be able to make replacements within replacements (for example, to highlight search terms within urls), check out this node module I created -
Example with hooks:
import React, { useEffect, useState, useRef } from 'react' export function Highlight({ value, highlightText }) { const [result, resultSet] = useState(wrap()) const isFirstRun = useRef(true) function wrap() { let reg = new RegExp('(' + highlightText + ')', 'gi') let parts = value.split(reg) for (let i = 1; i < parts.length; i += 2) { parts[i] = ( <span className='highlight' key={i}> {parts[i]} </span> ) } return <div>{parts}</div> } useEffect(() => { //skip first run if (isFirstRun.current) { isFirstRun.current = false return } resultSet(wrap()) }, [value, highlightText]) return result } i think this is the most light perfect solution:
render() { const searchValue = "an"; const searchWordRegex = new RegExp(searchValue, "gi"); const text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text"; return ( <div> {text.split(searchWordRegex).length > 1 ? text.split(searchWordRegex).map((chunk, index) => { if (chunk !== "") { return index === 0 && ! new RegExp("^" + searchValue, "gi").test(text) ? ( chunk ) : ( <span key={index}> <span className="highlight" style={{ fontWeight: "bold" }} > {searchValue.charAt(0).toUpperCase() + searchValue.slice(1)} </span> {chunk} </span> ); } else { return null; } }) : text} </div> ); } 1and here is a working example
I just a wrote function helper to replace some Texts, Components, and even HTMLs to a template string for my project. It turned out so nice and smooth.
const replaceJSX = (str, replacement) => { const result = []; const keys = Object.keys(replacement); const getRegExp = () => { const regexp = []; keys.forEach((key) => regexp.push(`{${key}}`)); return new RegExp(regexp.join('|')); }; str.split(getRegExp()).forEach((item, i) => { result.push(item, replacement[keys[i]]); }); return result; }; Usage:
const User = ({ href, name }) => { return ( <a href={href} title={name}> {name} </a> ); }; const string = 'Hello {component}, {html}, {string}'; return ( <div> {replaceJSX(string, { component: ( <User href=' name='Magnus Engdal' /> ), html: ( <span style={{ fontWeight: 'bold' }}> This would be your solution </span> ), string: 'Enjoy!', })} </div> ) And you'll get something like this:
<div>Hello <a href="" title="Magnus Engdal">Magnus Engdal</a>, <span>This would be your solution.</span>, Enjoy!.</div> Adding recursiveness to @Amir Fo's answer:
export const replaceJSX = (subject, find, replace) => { const result = []; if(Array.isArray(subject)){ for(let part of subject) result = [ ...result, replaceJSX(part, find, replace) ] return result; }else if(typeof subject !== 'string') return subject; let parts = subject.split(find); for(let i = 0; i < parts.length; i++) { result.push(parts[i]); if((i+1) !== parts.length) result.push(replace); } return result; } export const replaceJSXRecursive = (subject, replacements) => { for(let key in replacements){ subject = replaceJSX(subject, key, replacements[key]) } return subject; } You can now replace any number of strings with JSX elements at once by calling replaceJSXRecursive like below:
replaceJSXRecursive(textVar, { ':': <div></div>, ';': <div></div> }) 
