如何正确替换 <pre> 元素的内容

Question

如何使用jQuery（甚至纯JS）将给定字符串解析为HTML，然后替换生成的[=33]中所有<pre>元素的内容=]（没有 encoding/decoding 其中的实体）并将其转换回字符串？

例如，假设我将以下 HTML 存储为字符串：

<p>HTML block</p>
<pre>
<body>
    <h1>Hello World</h1>
    <p>Hi</p>
</body>
</pre>

并且我想将所有 \n 个字符变成 <br/>，这样输出字符串将是：

<p>HTML block</p>
<pre><br/><body><br/><h1>Hello World</h1><br/><p>Hi</p></br></body><br/></pre>

请注意，<pre> 元素中可以包含任何内容，包括其他嵌套元素或脚本。

我尝试使用 $.parseHTML() 但由于某种原因它会去除某些嵌套元素（例如 <pre> 中的 <body>）

Answer 1

我知道 RegEx 不是最好的 ~~但我稍后会添加一个 DOM 解决方案~~。 假设 string 是你的字符串

string.replace(/(?:\<pre[\S\s]*?\>)([\S\s]*?)(?:\<\/pre\>)/, string.match(/(?:\<pre[\S\s]*?\>)([\S\s]*?)(?:\<\/pre\>)/)[1].replace(/\n/g, '<br/>'));

DOM解析器

var d = (new DOMParser).parseFromString(string, 'text/html');
d.getElementsByTagName('pre')[0].innerHTML = d.getElementsByTagName('pre')[0].innerHTML.replace(/\n/g, '<br/>');

d 类似于 document，您可以将此元素放入 DOM 结构中。

要使其成为字符串，您可以这样做：

var d = (new DOMParser).parseFromString(string, 'text/html'); d.getElementsByTagName('pre')[0].innerHTML.replace(/\n/g, '<br/>');
var newstring = d.body.innerHTML;

这将创建一个新变量，newstring 这是您的结果字符串

如何正确替换 <pre> 元素的内容

How To Properly Replace The Content of a <pre> Element

javascript

xhtml

jquery

DOM解析器