Javascript reactStringReplace:无法使用捕获组正则表达式格式化粗体/斜体/下划线文本

共享问题来自：

反应字符串替换：

我在使用

reactStringReplace

格式化带有粗体/斜体标记的文本时遇到问题。我将其设置如下：

var text1 = "[b]Testing bold [i]and italic[/i] tags[/b]"
var text2 = "[b]Testing bold [i]and italic tags[/b][/i]"

let replaced = reactStringReplace(text1, /\[b\]([\s\S]+)\[\/b\]/g, (match, i) => {
   return <b key={i}>{match}</b>
})
replaced = reactStringReplace(replaced, /\[i\]([\s\S]+)\[\/i\]/g, (match, i) => {
   return <i key={i}>{match}</i>
})

// result (html)
<b>Testing [i]bold and italic[/i] tags</b>
<b>Testing [i]bold and italic tags</b>[/i]

var text1=“[b]测试粗体[i]和斜体[/i]标记[/b]”
var text2=“[b]测试粗体[i]和斜体标记[/b][/i]”
let replaced=reactStringReplace（text1，/\[b\]（[\s\s]+）\[\/b\]/g，（匹配，i）=>{
返回{match}
})
已替换=反应字符串替换（已替换，/\[i\]（[\s\s]+）\[\/i\]/g，（匹配，i）=>{
返回{match}
})
//结果（html）
测试[i]粗体和斜体[/i]标记
测试[i]粗体和斜体标记[/i]

我不确定这是否是

reactStringReplace

、我正在使用的正则表达式或其他方面的问题。如果我首先应用斜体替换，我会得到预期的斜体标记，但[b]标记保持不变。此用例是否可以使用

reactStringReplace

或我是否需要使用

危险的西汀HTML

---

额外好处：

reactStringReplace

是否能够处理不平衡的标记，或者像

text2

中那样处理格式不正确的标记，或者我是否应该进行一些预处理以确保字符串正确平衡并格式化？

您的示例存在多个问题

• 您不使用推荐的JSX密钥格式

  {match}

  （见下文）
• 你的比赛重叠了
• 贪婪的

  +

  量词可能匹配过多
• 缺少

  s等

广告1：引用全文：

在许多React示例中，您将看到使用的

i

或

索引

变量
作为JSX标记的键（例如本例中的

标记），但是在本例中，我们在三个单独的循环中迭代。 这意味着我们不能使用

key={i}

，因为这三个JSX 标签可以获得相同的密钥

广告2：然而，这里最关键的部分是您的匹配重叠，这与

不匹配

示范：

const text = 'Hey @ian_sinn#reactconf';
let replacedText;

// Match @-mentions
replacedText = reactStringReplace(text, /@(\w+)/g, (match, i) => (
  <b key={match + i}>@{match}</b>
));

// Match hashtags
replacedText = reactStringReplace(replacedText, /#(\w+)/g, (match, i) => (
  <a key={match + i} href={`https://twitter.com/hashtag/${match}`}>#{match}</a>
));

但这需要你在这个问题上抛出更复杂的正则表达式，给你难看的标记，而且可以说，这违背了整个冒险的目的

广告3：将其与使用ungreedy匹配的简单香草正则表达式替换进行比较：
[\s\s]+？


conststr=`[b]测试粗体[i]和斜体[i]标记[/b]`；
const result=str.replace（/\[b\]（[\s\s]+？）\[\/b\]/gm，`1`）
.替换（/\[i\]（[\s\s]+？）\[\/i\]/gm，`1`）；
log（'替换结果：'，结果）到目前为止，无法处理嵌套替换。我看到您正在开发一个补丁，将此功能添加到reactStringReplace。但这可以说超出了这个问题的范围。
render() {    
    const text = '[b]Testing bold [i]and italic[/i] tags[/b]';
    let replacedText;

    replacedText = reactStringReplace(text, /\[b\]((?:(?!\[\/b\]|\[i\]|\[\/i\]).)*)/g, (match, i) => (
      <b key={match + i}>{match}</b> 
    ));

    replacedText = reactStringReplace(replacedText, /\[i\]((?:(?!\[\/b\]|\[i\]|\[\/i\]).)*)/g, (match, i) => (
      <b><i key={match + i}>{match}</i></b>
    ));

    replacedText = reactStringReplace(replacedText, /\[\/i\]((?:(?!\[\/b\]|\[i\]|\[\/i\]).)*)/g, (match, i) => (
      <b key={match + i}>{match}</b>
    ));

    replacedText = reactStringReplace(replacedText, /\[\/b\]((?:(?!\[\/b\]|\[i\]|\[\/i\]|$).)*)$/g, (match, i) => (
      <b key={match + i}>{match}</b>
    ));

    return (
      <div>
        {replacedText}
      </div>
    );
  },
});