将字符串替换为JSX标签

Question

我有一个像这样的琴弦

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>

)

Answer 1

在您的first内map，您可以按这些特定的关键字分隔行。当您在的正则表达式中包含捕获组时split，捕获的子字符串将包含在结果数组中，因此您可以执行以下操作：<React.Fragment>&nbsp; {&nbsp; &nbsp; str.split('\n').map(line => (&nbsp; &nbsp; &nbsp; <span>&nbsp; &nbsp; &nbsp; &nbsp; {line.split(/\*\*(.+?)\*\*/).map((s, i) => i % 2 ? (<b>{s}</b>) : s)}&nbsp; &nbsp; &nbsp; &nbsp; <br/>&nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; ))&nbsp; }</React.Fragment>这看起来像降价。您还应该考虑使用markdown插件，react-markdown以使您的生活变得更轻松。

Answer 2

let str = "You would get items\nwhich value about **$50**\nif you **pre-booked** it!"const res = str.split('\n').map(line =>&nbsp; `<span>&nbsp; ${line.replace(/\*\*(.*?).\*\*/,match => `<b>${match.substring(2, match.length - 2 )}</b>`)} <br/> </span>`)console.log(res)