javascript - 在react中用html标签替换字符串之间的字符

Question

我正在尝试解析一些文本，以便 _this is emphasized!_包裹在<em>中标签如下:<em>this is emphasized!</em> .

我的组件当前如下所示:

export default class TextParser extends React.Component {
  render() {
    let text = this.props.text,
        parsed, regex, paragraphs;

    regex = {
      paragraph: /(?:\r\n){2,}/g,
      emphasize: /\_(.*?)\_/g,
      strong: /\*(.*?)\*/g,
    }

    // Apply regex
    text = text.replace(regex.emphasize, (str) => {
      let parsed = str.substr(1, str.length - 1);

      return ('<em>' + parsed + '</em>')
    })

    paragraphs = text.split(regex.paragraph) || []
    paragraphs = paragraphs.map((text, i) => {
      return (
        <p key={i}>
          {text}
        </p>
      )
    })

    return (
      <div className="document">{paragraphs}</div>
    )
  }
}

这不起作用，但是输出 html 以纯文本显示标签，而不是在 html 中使用它们。这当然是因为 sanitizer 。

我可以dangerouslySetInnerHTML但我想避免这种情况。如何用 <em> 替换文本之间的下划线标签？

Answer 1

正如您所注意到的，放置字符串 "<em>"作为 replace 结果的一部分只是添加该字符串而不是实际的标签。

您将无法直接在 replace 内创建标签因为它是在字符串上操作的。

相反，请将字符串分解为单独的元素，并在需要的位置添加标签。您已经在段落案例中做了类似的事情。

因为段落大小写也对字符串进行操作，所以此类操作只能嵌套完成，因为一旦完成操作，您就不再拥有纯文本字符串，而是拥有一个对象数组。所以在这个例子中我移动了 <em>段落解析内的解析。

最后一点，我必须修改 emphasize 的正则表达式这样它就捕获了下划线，因为我需要在完成分割后再次检查它是否匹配。

let text = this.props.text,
    parsed, regex, paragraphs;

regex = {
  paragraph: /(?:\r\n){2,}/g,
  emphasize: /(\_.*?\_)/g,
  strong: /\*(.*?)\*/g,
}

paragraphs = text.split(regex.paragraph) || []
paragraphs = paragraphs.map((text, i) => {
  return (
    <p key={i}>
      {        
           // Apply regex
           text.split(regex.emphasize).map((str) => {
           let parsed = str.search(regex.emphasize) !== -1 
              ? (<em>{str.substr(1, str.length - 2)}</em>) 
              : str;
            return parsed;
        })}
    </p>
  )
})

return (
  <div className="document">{paragraphs}</div>
)

根据您下面的评论，您还想知道如何处理任一/或格式化情况。因此，为了完整起见，我在此处包含了该代码。我选择将格式模式组合到单个正则表达式中，然后显式检查“_”或“*”来决定是否添加 em或b标签。然后，当存在匹配项时，我会递归调用此函数，以防其中存在其他匹配项。您可以选择以不同的方式进行清理，但我希望这会有所帮助。

let text = this.props.text,
    parsed, regex, paragraphs;

regex = {
  paragraph: /(?:\r\n){2,}/g,
  formatting: /(\_.*?\_)|(\*.*?\*)/g,
}

  let applyFormatting = (text) => {
    return text.split(regex.formatting).filter(n => n).map((str) => {
    let parsed = str[0] == '_'
        ? (<em>{applyFormatting(str.substr(1, str.length - 2))}</em>)
        : str[0] == '*'
        ? (<b>{applyFormatting(str.substr(1, str.length - 2))}</b>)
        : str;
    return parsed;
  });
};

paragraphs = text.split(regex.paragraph) || []
paragraphs = paragraphs.map((text, i) => {
  return (
    <p key={i}>
      { applyFormatting(text) }
    </p>
  )
})

return (
  <div className="document">{paragraphs}</div>
)