使用 jQuery 对元素内的 HTML 实体进行编码

Encode HTML Entities inside an Element Using jQuery

本文关键字：实体 编码 HTML jQuery 元素 使用      更新时间：2023-09-26

给定以下 HTML，我将如何对<pre><code class="language-html"></code></pre>块内的 HTML 实体进行编码？ 注意，在将使用它的实际页面上，有许多这样的块。

<div><strong>Rendered</strong>
    <div>This is a div, which contains a <p>p</p> and a <span>span</span>.</div>
</div>
<div><strong>Code</strong>
    <pre><code class="language-html">
        <div>This is a div, which contains a <p>p</p> and a <span>span</span>.</div>
    </code></pre>
</div>

目标是使此输出如下所示：

这是一个div，其中包含一个p和一个跨度。

<div>This is a div, which contains a <p>p</p> and a <span>span</span>.</div>

（即，代码的第一个副本应该呈现，而第二个副本应该只显示。

编辑（2016年2月14日）：从输入字段读取属性时丢失的 HTML 编码解决了略有不同的问题，因此这不是重复。

一个简单的解决方案是抓取html()，然后将其设置为text()：

$('pre > code.language-html').text(function() {
	$(this).text($(this).html());
})
// or simpler
//$('pre > code.language-html').text(function() { return $(this).html(); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>This is a div, which contains a <p>p</p> and a <span>span</span>.</div>
<div><pre><code class="language-html">
    <div>This is a div, which contains a <p>p</p> and a <span>span</span>.</div>
</code></pre></div>
<div><pre><code class="language-html">
    <div>This is a div, which contains a <p>p</p> and a <span>span</span>.</div>
</code></pre></div>

相关文章：