Replace part of string with tag in JSX

Question

I\'m trying to replace parts of a string with JSX tags, like so:

render: function() {
    result = this.props.text.replace(\":\",


        
      

Answer 1

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', '')

And then render it using dangerouslySetInnerHTML inside an element.

Full example:

const textToRepace = 'Insert :' // we will replace : with div spacer
const content = textToRepace.replace(':', '
') : ''

// then in rendering just use dangerouslySetInnerHTML
render() {
    return(
        

    )
}