如何使用 JavaScript 进行 HTML 编码？

在前端开发中，我们通常需要将一些特殊字符进行 HTML 编码，以避免浏览器将其解析为 HTML 标签或其他特殊字符。例如，如果我们想要在 HTML 页面中显示小于号（<），我们就需要将其编码为 <。

JavaScript 提供了几种方式来执行 HTML 编码。下面将介绍其中两种常用的方式。

使用浏览器内置方法

所有现代浏览器都提供了一个内置的方法 encodeURIComponent，可以将字符串进行 URI 编码。虽然这个方法不是专门针对 HTML 编码设计的，但它可以很好地满足我们的需求。

const encoded = encodeURIComponent('<p>Hello, world!</p>');
console.log(encoded); // %3Cp%3EHello%2C%20world!%3C%2Fp%3E

使用这种方法，所有字符都会被编码，包括标点符号和空格。因此，如果您只需要对某些特殊字符进行编码，那么这种方式可能有些过度了。

使用第三方库

另外一种更灵活的方式是使用第三方库。许多 JavaScript 库都提供了用于 HTML 编码的工具函数。例如，Lodash 库提供了一个名为 escape 的函数，可以将字符串进行 HTML 编码。

const escaped = _.escape('<p>Hello, world!</p>');
console.log(escaped); // &lt;p&gt;Hello, world!&lt;/p&gt;

使用第三方库可以让代码更加简洁，但需要引入额外的依赖，并且可能会增加项目的体积。

总结

以上是两种常用的方法来进行 HTML 编码。在实际开发中，根据具体需求选择合适的方法即可。如果您只需要对少量特殊字符进行编码，那么使用浏览器内置方法可能更加适合；如果您需要进行大量的 HTML 编码操作，那么使用第三方库可能更加便捷。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30678