npm 包 `he` 使用教程

简介

在前端开发中，我们常常需要处理 HTML 实体编码，例如将 < 转换为 <。而 he 就是一个可以用来处理 HTML 实体编码的 npm 包。

he 提供了两个函数：he.encode() 和 he.decode()，分别用于实体编码和解码。其中，he.encode() 的默认选项可以避免 XSS 攻击，因此在处理用户输入时非常有用。

安装

使用 npm 可以很方便地安装 he，只需要运行以下命令即可：

npm install he

使用方法

编码

使用 he.encode() 函数可以将字符串转换为 HTML 实体编码。例如：

const he = require('he');

const str = '<script>alert("Hello, world!")</script>';
const encodedStr = he.encode(str);

console.log(encodedStr); // 输出 '&lt;script&gt;alert(&quot;Hello, world!&quot;)&lt;/script&gt;'

当然，在需要避免 XSS 攻击的场合，我们应该将选项 encodeOptions.useNamedReferences 设置为 true，这样就会使用命名实体引用。

const he = require('he');

const str = '<script>alert("Hello, world!")</script>';
const encodedStr = he.encode(str, {
  useNamedReferences: true,
});

console.log(encodedStr); // 输出 '&#x3C;script&#x3E;alert(&#x22;Hello, world!&#x22;)&#x3C;/script&#x3E;'

解码

使用 he.decode() 函数可以将 HTML 实体编码解码为原始字符串。例如：

const he = require('he');

const encodedStr = '<script>alert("Hello, world!")</script>';
const str = he.decode(encodedStr);

console.log(str); // 输出 '<script>alert("Hello, world!")</script>'

总结

he 是一个非常实用的 npm 包，能够帮助我们处理 HTML 实体编码，并在需要避免 XSS 攻击时提供了选项。在实际开发中，我们可以根据需要灵活使用这个包来简化我们的代码。

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