javascript - 用 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> 标签替换 pre 标签内的换行符。

最终结果应该是。

<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> 之后标签。在 https://regex101.com/r/qW7tZ1/5 试试这个正则表达式

How do I replace all line breaks in a string with <br /> tags?不符合我的条件，因为我不想替换所有出现的换行符。

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));