替换出现在其中的所有折断线 <pre> 标记 <br> 在javascript中标记

Question

我有一个这样的html字符串

<div>
    <p>
        All set to go in.
        Finally in.
    </p>
    <pre>
        Yup this text is present 
        inside of the pre tag.
    </pre>
</div>

我想替换换行符预标签内呈现<BR>标记。

最终结果应该是。

<div>
    <p>
        All set to go in.
        Finally in.
    </p>
    <pre>Yup this text is present<br> inside of the pre tag.</pre>
</div>

到目前为止我尝试过什么？ 我尝试使用正则表达式创建了这样的模式：-/ /is(?=.*<\\/pre>)/g (?=.* </pre> /is(?=.*<\\/pre>)/g </pre> /is(?=.*<\\/pre>)/g ，它只能找到</pre>标记之前的'is'。 我还想在其中添加一个条件，即如果在<pre>标签之后。 在https://regex101.com/r/qW7tZ1/5上尝试此正则表达式

如何用<br />标记替换字符串中的所有换行符？ 不符合我的条件，因为我不想替换所有出现的换行符。

Answer 1

不要使用正则表达式来解析/处理html，请使用简单的DOM函数

 let html = `<div> <p> All set to go in. Finally in. </p> <pre> Yup this text is present inside of the pre tag. </pre> </div>`; function newlineToBr(str) { let div = document.createElement('div'); div.innerHTML = str; Array.from(div.getElementsByTagName('pre')).forEach(pre => { pre.innerHTML = pre.innerHTML.replace(/\\n/g, "<br />"); }); return div.innerHTML; } console.log(newlineToBr(html)); 

Answer 2

这是一个简单的解决方案

export default (html: string): string => {
  if (html.indexOf('<pre>') === -1) return html;
  const array = html.split('<pre>');
  let finalContent = '';
  for (let i = 0; i < array.length; i++) {
    if (i === 0) {
      finalContent = `${array[0]}<pre>`;
    } else {
      const secondArray = array[i].split('</pre>');
      finalContent = `${finalContent}${secondArray[0]
        .replace(/\r\n/g, '<br />')
        .replace(/[\r\n]/g, '<br />')}</pre>${secondArray[1]}`;
      if (i !== array.length - 1) finalContent = `${finalContent}<pre>`;
    }
  }
  return finalContent;
};