Javascript 用JSX中的HTML span节点替换字符串中的大括号

我有一个字符串需要参数化，比如“你好{name}，你好吗？”。我想用一个变量替换大括号和里面的文本，然后在我的React组件中渲染它，但我还需要通过将变量文本包装在span/strong标记（例如所需的最终结果）中来突出显示和加粗该文本

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

你好，戴夫，你好吗？ 我正在使用React/JSX，我知道如何使用String.replace替换大括号和其中的文本，然后渲染它，例如

// 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>
)

//这个带有占位符花括号的字符串将从对服务器的API调用中接收。此处设置仅用于说明目的
让string='Hello{name}，你好吗？'
let name='Dave'//这里也不会手动设置，它保存在redux存储中
让greeting=string.replace（/{（.*）}/，name）；
//这会使问候语呈现出您所期望的效果，例如：你好，戴夫，你好吗

返回(
{问候语}

)

但是，如果我尝试用span元素替换花括号，它将以[object object]而不是我的参数错误地渲染

// ...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>
)

/…无状态组件的其余部分.jsx
让greeting=string.replace（/{（.*？}/，{name}）；
//这将呈现HTMLHello[object]，你好吗

返回(
{问候语}

)

我想这一定是和什么有关，但老实说，这完全是猜测。有什么想法可以实现我想要的功能吗

---

jsIDLE:

在string.replace中使用的第二个参数不正确。花括号内的name变量表示一个javascript对象，其名称键和值与name变量中的相同

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

let greeting=string.replace（/{（.*？}/，“”+name+”）；

---

很抱歉，因为我没有输入上面的字符串作为代码，所以它忽略了标记。现在它们必须是可见的

您可以尝试替换为包含原始html标记的字符串，然后使用危险的html呈现div

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

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

var greeting=textToEnhance.replace（/{（.*）}/，“”+this.props.name+“”）；
返回；

顺便说一句，您可以使用ES6的格式，例如

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

注意：这些不是单引号，而是符号。此符号称为“重重音”字符

我知道你的模板来自服务器，所以你不能直接使用上面的方法

但是，使用RegExp，例如（单击此RegExp使其过期），您可以解析并迭代所有变量名，例如

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);
});

---

当variables是一个预定义的对象，其中包含作为键值对的变量，templateString包含您的模板（可选来自服务器）。

使用String.replace而不这样做有什么原因吗？这是因为字符串和名称变量在不同的调用中来自服务器。因此，名称保存在用户对象上的redux存储中。文本也存储在服务器上的数据库中，带有占位符。因此，我需要用商店中的用户信息替换占位符。问题澄清在传输后，

{name}

将被返回对象的

React.createElement（“span”，null，{name}）

的结果替换，这就是为什么结果字符串显示为

[object object]

@user1858268是的，我想可能会发生类似的事情，您知道实现所需功能的其他策略吗？例如，您可以用

“++{name}+”

替换，然后使用渲染。但可能还有其他方法。不，那不是真的。如果你检查小提琴，你可以看到注释掉的答案很好。这并没有回答我的问题，本质上我想把我的变量包装在span标记中。如果你检查用户1858268的答案，你仍然需要使用危险设置的内部HTML来使用它。是的，我想尝试使用危险设置的内部HTML，但我不确定安全含义是什么？