Javascript 使用正则表达式将文本替换为列表中的标记

我正试图使用正则表达式在React.js中编写一个简单的文本替换程序，但对此我无能为力

我有一个令牌列表和它们对应的替换文本。我还有一个文本区域，其中包含用户编写的文本。每当一个单词环绕{}时，文本将被相应标记的替换文本替换

例如，如果我的文本区域中有一个{example}，我必须检查我的令牌列表，看看列表中是否有值example，并用列表的替换值的值替换{example}

我现在要做的是使用以下工具检查我的文本区域中是否有匹配项：

let regEx = /\{[a-zA-Z_][a-zA-Z0-9_]*\}/;
inputText.match(regEx);

结果，我得到了一个索引和输入，但是我如何用替换文本替换匹配的文本呢？我试着使用replace函数，但不知怎的，我不明白如何使用它

以下是我的过滤功能，供您查看：

this.filterText = () => {
  //check if we have text in Input text area
  if (this.state.inputText) {
    let regEx = /\{[a-zA-Z_][a-zA-Z0-9_]*\}/;
    let inputText = this.state.inputText;
    this.state.data.forEach((token, index) => {
      let match = inputText.match(regEx);
      if (match) {
        console.log('match:', match);
        //should replace matched text with replacement text
        inputText.replace(regEx, this.state.data[index].replacementText);
      }
    });
  }
}

---

下面是一个简单的香草js解决方案。例如，尝试在textarea中的任意位置键入我喜欢{make}个东西<代码>{make}应替换为

create

编辑

已进行更改以支持递归替换

现在可以在替换字符串中包含一些

{token}

代码还防止循环调用

尝试键入

{hello}

或

{circular}

以确保它按您想要的方式工作

片段

document.addEventListener（“DOMContentLoaded”，function（））{
buildResult（）；
});
让令牌={
“礼貌”：“先生”，
“哑巴”：“真的哑巴”，
“foo”：“bar”，
“名字”：“马蒂”，
“姓氏”：“McFly”，
“你好”：“你好{firstName}{lastName}”，
“循环”：“你好{循环}{firstName}{lastName}”，
“制作”：“创建”，
}
函数buildResult（）{
让text=document.getElementById（'userInput'）.value；
让结果=替换标记（文本）；
document.getElementById（'result'）。innerHTML=result；
}
函数替换标记（文本、替换堆栈）{
//常数re=/{（[^}]+）}/g；//在大括号之间匹配除“}”以外的任何内容
常数re=/{[\w]*\}/g；//匹配初始正则表达式
让结果=文本；
让textTokens=text.match（re）；
replacementStack=replacementStack | |[]；
textTokens&&textTokens.forEach（m=>{
让token=m.replace（/{|}/g'，）；
//防止循环替换，令牌不应已被替换
if（replacementStack.indexOf（token）=-1）{
//将令牌添加到替换堆栈
replacementStack.push（令牌）；
let replacement=代币[代币]；
如果（更换）{
替换=替换令牌（替换，替换堆栈）；
结果=结果。替换（m，替换）；
}
}
});
返回结果；
}

标签{显示：块；字体重量：粗体；}
text区域{宽度：600px；高度：150px；}
输入文本
Lorem Ipsum只是印刷和排版行业的{dummy}文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。
它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。
结果

它不起作用，因为replace函数中的regEx必须与您要替换的完全相同（在本例中是令牌本身）

试试这个：

试试看

var replacementText={
“tokenX”：“tokenX已替换”，
“代币”：“代币替换”，
“tokenZ”：“tokenZReplaced”
};
函数替换文本（文本）{
for（替换文本中的变量rt）{
text=text.replace（newregexp（“{”+rt+“}”），replacementText[rt]）；
}
document.getElementById（“demo”）.innerHTML=text；
}

另外，你可能会发现这里接受的答案也很有用：

---

您发布的代码从未分配

替换的结果。我不确定
数据
结构，但以下内容应该与布局相对应


函数foo（）{
this.state={inputText:'这是一个测试，它应该{动词}在{}之间的第一个{名词}和下面的{名词}都是{动词}，但不应该是{其他}标记}；
this.data={动词：'replace'，名词：'element'}；
this.filterText=（）=>！this.state.inputText | | Object.keys（this.data）.reduce（（t，k）=>
t、 替换（新的RegExp（'{'+k+'}'，'g'），this.data[k]）
，this.state.inputText
);
}
设f=newfoo（）；log（f.filterText（））我喜欢你的解决方案，通过一些调整，我可以让我自己的示例工作。我有一个问题，我的正则表达式和你的正则表达式有什么区别吗？让这个例子也递归地工作会很困难吗？如果替换文本中有{test}，那么我将再次解析它，检查test是否在令牌列表中，并在文本中替换它。谢谢你完成了！我认为它可以满足您的需要。关于正则表达式，我只需要匹配大括号之间的任何内容，而不是
}
，但是如果您只需要匹配字母、数字或下划线，那么您可以这样简化：
{[\w]*\}
<代码>\w
匹配任何字母、数字或下划线。相当于[a-zA-Z0-9]。牙套不需要脱掉。非常感谢你，我不能要求更多了
<button onclick="replaceText('tokenX replaced: {tokenX}')">Try it</button>
<p id="demo"></p>

<script>
var replacementText = {
    "tokenX": "tokenXReplaced",
    "tokenY": "tokenYReplaced",
    "tokenZ": "tokenZReplaced"
};

function replaceText(text) {
    for(var rt in replacementText) {
        text = text.replace(new RegExp("{" + rt + "}"), replacementText[rt]);
    }
    document.getElementById("demo").innerHTML = text;
}
</script>