时间戳

首页 > 解决方案 > 将字符串替换为 JSX 标签

javascript - 将字符串替换为 JSX 标签

问题描述

我有一个类似的字符串

let str = "You would get items\nwhich value about **$50**\nif you **pre-booked** it!"

我想替换\n为<br/>，我用下面的代码实现了它。

str.split('\n').map((line)=>(<span>{line}<br/></span>)

我所取得的成就

<span>You would get items<br/></span>
<span>which value about $50<br/></span>
<span>if you pre-booked it!</span>

现在，我想强调一些这样的词。

我的期望

<span>You would get items<br/></span>
<span>which value about <b>$50</b><span>
<span>if you <b>pre-booked</b> it!</span>

我想像下面这样使用它。

const TextFormat = ({text}) => (
  <React.Fragment>
    {
      text.split('\n').map((line, i) => (<span key={i}>{line}<br/></span>)
    }
  </React.Fragment>
)

标签： javascriptreactjsjsx

解决方案

在您的第一个map中，您可以按这些特定关键字拆分行。当您在正则表达式 to 中包含捕获组时split，捕获的子字符串将包含在结果数组中，因此您可以执行以下操作：

<React.Fragment>
  {
    str.split('\n').map(line => (
      <span>
        {line.split(/\*\*(.+?)\*\*/).map((s, i) => i % 2 ? (<b>{s}</b>) : s)}
        <br/>
      </span>
    ))
  }
</React.Fragment>

这看起来像降价。您还应该考虑使用降价插件，react-markdown以使您的生活更轻松。

推荐阅读