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 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 (
    

      {
        byWords.map(word => {
          if (word.match(isEnglishWord)) {
            return {word};
          }
          return word;
        })
      }
    
    );
    
  }
}

// Render it
ReactDOM.render(
  ,
  document.getElementById("react")
);