Javascript React JS-替换匹配字符串并将字符串添加到下一个匹配字符串

对不起 对于这个令人困惑/误导的标题，我真的不知道如何用这个词

基本上，我从CS:GO服务器中提取玩家数据，重要的是玩家排名，它作为字符串提供给我，比如

{default}[{pink}Master{default}]

在游戏中，花括号内的颜色被十六进制值替换，但是对于我的react应用程序，我正在尝试替换它们，所以它是 它就像

[Master]

或者[大师]那里的大师是粉色的 我可以换新的{ 颜色 } 使用开始的跨距标记很容易，但是我不确定如何获得跨距应该结束的位置

试过这样的东西吗

const replaceColors=函数（str）{
const-original=str；
let指数；
让我们下一步；
让我们振作起来；
让颜色；
if（str.indexOf（“{default}”）！=-1）{
index=str.indexOf（“{default}”）；
//控制台日志（索引）；
strOut=str.substr（索引）；
strOut=strOut.replace（“{default}”，”）；
//控制台日志（strOut）；
indexNext=strOut.indexOf（“{”）；
如果（索引下一步！=-1）{
strOut=strOut.substr（0，indexNext）；
}
//控制台日志（strOut）；
color=reactStringReplace（str，{default}），（匹配，i）=>(
));
}
控制台。原木（彩色）；
返色；
}

这是从哪里来的

我的想法是得到第一个匹配{color}的索引，然后是下一个{的索引，然后得到介于这两者之间的任何东西

显然不能正常工作，但任何帮助都会很好。

我会使用React的。它可能……嗯，很危险，但它有它的用途

对于实际的替换，

.replace（）

应该足够了，并且希望比

.indexOf

更容易：

str.replace(
  /{default}([^{$]*)/g,
  // '[^{$]*' means 'more than 0 characters except { or end-of-string'
  '<span style="color: #fff;">$1</span>'
  // $1 is a 'capture group' - everything between ( and ) in the regex above
)

/*
so…

{default}[{pink}Peter{default}]

…gets replaced to:

<span style="color: #fff;">[</span>{pink}Peter<span style="color: #fff;">]</span>
*/

str.replace(
/{default}（[^{$]*）/g，
//“[^{$]*”表示“除{或字符串结尾外，超过0个字符”
'$1'
//$1是一个“捕获组”——上面正则表达式中介于（和）之间的所有内容
)
/*
所以…
{default}[{pink}Peter{default}]
…被替换为：
[{粉红}彼得]
*/

颜色字符串的替换（

{pink}

变为

）类似

或者，您可以只使用一个替换项，并在某种配置对象中查找颜色，如下面的代码段所示：

const colors={
默认值：“fff”，
粉红色：“f44283”，
蓝色：“41d9f4”，
绿色：“4cf441”，
黄色：“f4d041”
};
const formatRank=rank=>
等级
.替换(
// https://regex101.com/r/AbXrhg/1
/{（[^}]+）}（[^{$]*）/g，
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_function_as_a_parameter
（匹配、颜色、内容）=>
`${content}`
);
常量玩家=（{rank}）=>(
);
常量应用=(