亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

將字符串替換為JSX標簽

將字符串替換為JSX標簽

料青山看我應如是 2021-03-30 17:14:53
我有一個像這樣的琴弦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>)
查看完整描述

2 回答

?
白豬掌柜的

TA貢獻1893條經驗 獲得超10個贊

在您的first內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>

這看起來像降價。您還應該考慮使用markdown插件,react-markdown以使您的生活變得更輕松。


查看完整回答
反對 回復 2021-04-08
?
揚帆大魚

TA貢獻1799條經驗 獲得超9個贊

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


const res = str.split('\n').map(line =>


  `<span>  ${line.replace(/\*\*(.*?).\*\*/,match => `<b>${match.substring(2, match.length - 2 )}</b>`)} <br/> </span>`

)


console.log(res)


查看完整回答
反對 回復 2021-04-08
  • 2 回答
  • 0 關注
  • 489 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號