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

        {text.split(searchWordRegex).length > 1
          ? text.split(searchWordRegex).map((chunk, index) => {
              if (chunk !== "") {
                return index === 0 &&
                  ! new RegExp("^" + searchValue, "gi").test(text) ? (
                  chunk
                ) : (
                  
                    
                      {searchValue.charAt(0).toUpperCase() +
                        searchValue.slice(1)}
                    
                    {chunk}
                  
                );
              } else {
                return null;
              }
            })
          : text}
      
    );
  }

and here is a working example