Question

我遇到了需要用输入标签替换的正则表达式单词。但是当我添加html时，它读为纯字符串。
这是我的字符串：“您好，我的名字是/＃Ann＃/。我正在为/＃IStaff＃/工作，请您给我回电话”。我在哪里做错了？

editModalText() {
  const { modalMessage } = this.state
  let regex = /\/#(.*?)#\//g
  let replaced = modalMessage.replace(regex, '<input type="text">')
  return replaced
}

<div>{this.editModalText()}</div>

Answer 1

这是因为它是纯字符串。

如果要将JSX语法混合到模板中，则必须完全更改方法。

例如，构建一个tokenizer，它将把您的字符串转换为一个数组，如：

[
    "Hello, my name is ",
    "/# Ann #/",
    ". I'm working for ",
    "/# IStaff #/",
    ", could you please call me back"
]

然后在其上循环，将原始字符串或适当的JSX元素推入新数组，最后返回该数组。

Answer 2

您可以使用.*?来匹配中间部分。

let modalMessage = "Hello, my name is /# Ann #/. I'm working for /# IStaff #/, could you please call me back";
let regex = /\/#(.*?)#\//g;
let replaced = modalMessage.replace(regex, "<input />");
console.log(replaced);

此外，您还需要在正则表达式中使用反斜杠（\）来使/转义。
有效表达式以/开头和结尾：

/<regex>/<flags>

在您的示例中：

/          // <- Start of Regular expression
  \/       // <- Match /
  #        // <- Match #
    (.*?)  // <- Match the middle part (non-greedy)
  #        // <- Match #
  \/       // <- Match /
/g         // <- End regex and set "global" flag

HTML示例：

let modalMessage = "Hello, my name is /# Ann #/. I'm working for /# IStaff #/, could you please call me back";
let regex = /\/#(.*?)#\//g;
let replaced = modalMessage.replace(regex, '<input type="text">');

document.write(replaced);

Answer 3

您不会在占位符周围发现/（/是需要转义的正则表达式特殊字符）

使用(.+)或(.*)将提供贪婪匹配项。这意味着，它将尽可能匹配，这就是为什么匹配太多的原因。您想使用(.+?)或(.*?)

的惰性匹配（贪婪的反面，它会尽快停止）

您可以使用此一个：

let modalMessage = "Hello, my name is /# Ann #/. I'm working for /# IStaff #/, could you please call me back"
let regex = /\/#(.*?)#\//g
let replaced = modalMessage.replace(regex, '<Input />')
console.log(replaced)

正则表达式用字符串中的html标记替换字符

3 个答案: