Replace Curly Braces in string with a HTML span Node in JSX

Question

I have a string I need to parameterise like 'Hello {name}, how are you?'. I want to replace the curly braces and text inside with a variable then render it in my React Component but I also need that text to be highlighted and bold by wrapping the variable text in a span/strong tag eg of desired final result

Hello <span class="text-info"><strong>Dave</strong></span>, how are you?

I'm using React/JSX and I know how to replace the curly braces and text inside them using String.replace then render it eg

// This string with the placeholder curly braces would be received from an API call to a server. Only set here for demonstrative purposes
let string = 'Hello {name}, how are you?' 
let name = 'Dave' // Likewise would not be set manually here, it's held in a redux store
let greeting = string.replace(/{(.*?)}/, name);

// This renders the greeting as you'd expect e.g. <p>Hello Dave, how are you?</p>
return (
   <p>{greeting}</p>
)

However, if I try and replace the curly braces with a span element it renders incorrectly with [object Object] instead of my parameter

// ...rest of stateless Component.jsx
let greeting = string.replace(/{(.*?)}/, <span>{name}</span>);

// This renders the HTML <p>Hello [object Object], how are you?</p>
return (
   <p>{greeting}</p>
)

I think it must be something to do with React escaping something but to be honest that's a total guess. Any ideas how I can achieve the desired functionality?

JSFiddle: https://jsfiddle.net/ExoticChimp1990/o69ymt7q/

Answer 1

You can try replacing by a string containing raw html tags and then render your div using dangerouslySetInnerHTML.

var greeting = textToEnhance.replace(/{(.*?)}/, '<span>'+this.props.name+'</span>'); 

return <div dangerouslySetInnerHTML={{__html:greeting}}></div>;

Answer 2

BTW, you can use the formatting of ES6 eg

const name = "David";
const myHTML = `Hello ${name}, how are you?`;

Note: these are not single quotes, but ` symbols. This symbol called as "grave accent" character

I understand your templates come from a server, so you cannot directly use the method above.

However, using RegExp such as /\\$\\{(\\w+?)\\}/g (click to expirement with this RegExp) you can parse and iterate through all your variable names eg

var newString = templateString.replace(/(\$\{\w+?\})/g, function(match, p1, offset, str) {
  var matches = /\$\{(\w+?)\}/.exec(p1);
  var variableName = matches[1];
  return variables[variableName]
    ?variables[variableName]
    :console.error("Variable " + variableName + " is undefined in offset " + offset);
});

When variables is a predefined object containing your variables as key values pairs and templateString contains your template (optionally from a server).

Answer 3

The second argument you are using in string.replace is not correct. name variable inside curly braces means, a javascript object with name key and value as that in name variable.

let greeting = string.replace(/{(.*?)}/, '<span><strong>'+name+'</strong></span>');

I am sorry, as I didnt enter the string above as code, it ommited the tags. Now they must be visible.