使用 JavaScript 编码 HTML
- 在 JavaScript 中使用字符串替换对 HTML 进行编码
-
使用 JavaScript 中的
charCodeAt函数对 HTML 进行编码 -
在 JavaScript 中使用
createTextNode编码 HTML -
在 JavaScript 中使用
He.js编码 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>
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn