Заменить строку на тег 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

В пределах вашего первого 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, чтобы потенциально облегчить вашу жизнь.

Answer 2

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)