我有这样的琴弦
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>
)
最佳答案
在您的第一个map
中,您可以按这些特定的关键字分隔行。当在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
之类的markdown插件来简化生活。关于javascript - 将字符串替换为JSX标签,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55386183/