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

标签 javascript jquery xhtml

如何使用 jQuery(甚至纯 JS)将给定字符串解析为 HTML,然后替换所有 <pre> 的内容生成的 DOM 中的元素(无需对其中的实体进行编码/解码)并将其转换回字符串?

例如,假设我将以下 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()但由于某种原因,它会删除某些嵌套元素(例如, <body> 内的 <pre> )

最佳答案

我知道 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,它是结果字符串

关于javascript - 如何正确替换 <pre> 元素的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29932182/

相关文章:

javascript - 使用 Javascript 查找数组中最小未使用的数字

javascript - 带按键代码参数的模拟按键功能 Jquery

javascript - 数据表子行

javascript - 如何自动关闭在单击并失去焦点或切换选项卡后可见的 Bootstrap 工具提示?

jquery - 如何使用 jQuery mobile 创建覆盖框

javascript - 我制作了一些投票按钮(想想 reddit/digg/等)但是它们在 IE8 以下不起作用

html - 如何删除内容源代码中单词和句子之间的多个空格?

javascript - onclick设置值输入

jquery检查单个元素的有效性

javascript - 为什么 Bootstrap 面板折叠不能与 JSF 一起使用?