使用 JavaScript 编码 HTML
本文将介绍如何在 JavaScript 中对 HTML 字符串进行编码。我们将使用四种不同的方法，它们有共同的字符串替换。
字符串替换的目的是替换有潜在危险的字符。
在 JavaScript 中使用字符串替换对 HTML 进行编码
用字符串置换的 HTML 编码使用了 String.prototype.replace() 中的 replace() 方法。
replace() 方法将模式和替换作为参数并根据模式进行匹配。让我们看一个例子，看看它是如何工作的。
在下面的示例代码中，我们定义了一个将 HTML 字符串作为参数的函数。此函数将返回编码的 HTML。
function htmlEncode(string) {
return string.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/'/g, ''')
.replace(/"/g, '"')
.replace(/\//, '/');
}
console.log(htmlEncode('<h1>Hello <span class=\'cool\'>world</span> </h1>'));
输出：
"<h1>Hello <span class='cool'>world</span> </h1>"
使用 JavaScript 中的 charCodeAt 函数对 HTML 进行编码
charCodeAt 方法返回一个整数，表示索引处的 UTF-16 代码单元。这使得它非常适合在 HTML 中编码某些字符。
我们在下面提供了一个示例代码，其中我们定义了一个将字符串作为参数的函数。
我们在函数定义中设置了一个数组作为缓冲区。因此，我们使用典型的 for 循环遍历数组。
在循环期间，我们使用 unshift 方法将一些字符添加到数组的开头。这些字符与 &#、charCodeAt 返回的整数和一个分号组合在一起。
我们在循环期间和函数返回时使用 join 函数将它们连接起来。
function encodeWithCharCode(string) {
let buffer = [];
for (let i = string.length - 1; i >= 0; i--) {
buffer.unshift(['&#', string[i].charCodeAt(), ';'].join(''));
}
return buffer.join('');
}
console.log(encodeWithCharCode('<h1>Hello world</h1>'));
输出：
"<h1>Hello world</h1>"
在 JavaScript 中使用 createTextNode 编码 HTML
你可以使用 createTextNode 方法对给定的 HTML 进行编码。该方法接受一个字符串作为它在幕后编码的参数。
之后，你可以获取此编码数据。你可以通过过程编程或函数来完成所有这些工作。
该函数将接受一个 HTML 字符串作为参数。之后，它使用 createElement 创建一个元素，并使用 createTextNode 创建一个文本节点。
最后，该函数将此文本节点附加为创建元素的子节点，并通过 innerHTML 返回它。一直以来，createTextNode 对创建的文本进行编码。
function encodeWithTextNode(htmlstring) {
let textarea = document.createElement('textarea');
let text = document.createTextNode(htmlstring);
textarea.appendChild(text);
return textarea.innerHTML;
}
console.log(
encodeWithTextNode('<h1>Hello <span class=\'cool\'>world</span> </h1>'));
输出：
"<h1>Hello <span class='cool'>world</span> </h1>"
在 JavaScript 中使用 He.js 编码 HTML
He.js 是 Mathias Bynens 创建的开源实体编码器和解码器。要开始使用 He.js 库，请访问 he.js GitHub 存储库。
到达那里后，选择你喜欢的下载选项。你可以在 HTML 代码中嵌入 He.js 作为替代选项。
你所要做的就是访问 he.js 的 cdnjs 页面并获取你喜欢的 CDN 链接。
下一个代码块展示了如何使用 he.js 对 HTML 字符串进行编码。
<body>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/he/1.2.0/he.min.js"
integrity="sha512-PEsccDx9jqX6Dh4wZDCnWMaIO3gAaU0j46W//sSqQhUQxky6/eHZyeB3NrXD2xsyugAKd4KPiDANkcuoEa2JuA=="
crossorigin="anonymous"
referrerpolicy="no-referrer">
</script>
<script type="text/javascript">
console.log(he.encode("<h1>Hello <span class='cool'>world</span> </h1>"));
</script>
</body>
输出：
<h1>Hello <span class='cool'>world</span> </h1>
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
