使用 JavaScript 编码 HTML

Habdul Hazeez 2023年1月30日 2022年5月5日
  1. 在 JavaScript 中使用字符串替换对 HTML 进行编码
  2. 使用 JavaScript 中的 charCodeAt 函数对 HTML 进行编码
  3. 在 JavaScript 中使用 createTextNode 编码 HTML
  4. 在 JavaScript 中使用 He.js 编码 HTML
使用 JavaScript 编码 HTML

本文将介绍如何在 JavaScript 中对 HTML 字符串进行编码。我们将使用四种不同的方法,它们有共同的字符串替换。

字符串替换的目的是替换有潜在危险的字符。

在 JavaScript 中使用字符串替换对 HTML 进行编码

用字符串置换的 HTML 编码使用了 String.prototype.replace() 中的 replace() 方法

replace() 方法将模式和替换作为参数并根据模式进行匹配。让我们看一个例子,看看它是如何工作的。

在下面的示例代码中,我们定义了一个将 HTML 字符串作为参数的函数。此函数将返回编码的 HTML。

function htmlEncode(string) {
  return string.replace(/&/g, '&')
  			.replace(/</g, '&lt;')
  			.replace(/>/g, '&gt;')
  			.replace(/'/g, '&#39;')
  			.replace(/"/g, '&#34;')
  			.replace(/\//, '&#x2F;');
}

console.log(htmlEncode("<h1>Hello <span class='cool'>world</span> </h1>"));

输出:

"&lt;h1&gt;Hello &lt;span class=&#39;cool&#39;&gt;world&lt;&#x2F;span&gt; &lt;/h1&gt;"

使用 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>"));

输出:

"&#60;&#104;&#49;&#62;&#72;&#101;&#108;&#108;&#111;&#32;&#119;&#111;&#114;&#108;&#100;&#60;&#47;&#104;&#49;&#62;"

在 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>"));

输出:

"&lt;h1&gt;Hello &lt;span class='cool'&gt;world&lt;/span&gt; &lt;/h1&gt;"

在 JavaScript 中使用 He.js 编码 HTML

He.js 是 Mathias Bynens 创建的开源实体编码器和解码器。要开始使用 He.js 库,请访问 he.js GitHub 存储库

到达那里后,选择你喜欢的下载选项。你可以在 HTML 代码中嵌入 He.js 作为替代选项。

你所要做的就是访问 he.jscdnjs 页面并获取你喜欢的 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>

输出:

&#x3C;h1&#x3E;Hello &#x3C;span class=&#x27;cool&#x27;&#x3E;world&#x3C;/span&#x3E; &#x3C;/h1&#x3E;
Habdul Hazeez avatar Habdul Hazeez avatar

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

相关文章 - JavaScript HTML