本教程详细介绍了如何在javascript环境中，利用浏览器内置的dom解析器将html实体字符（如`é`）转换为其对应的实际字符（如`é`）。通过创建临时dom元素并操作其innerhtml和innertext属性，可以高效、安全地实现字符串的解码，尤其适用于前端接收后端数据时遇到的字符编码问题。文章还提供了可复用的函数示例，以提升代码的整洁性和效率。
在Web开发中，我们经常会遇到从后端接收到的字符串包含HTML实体编码的情况，例如 pokémon 而非直观的 pokémon。尽管页面的 meta 标签可能已声明为 utf-8，但这种编码通常是为了确保字符在不同系统和传输过程中的兼容性。然而，在前端显示时，我们需要将其解码为可读的字符。本文将介绍一种利用浏览器内置DOM解析器进行HTML实体解码的有效方法。
利用浏览器DOM解析器进行字符解码
浏览器本身具备强大的HTML解析能力。我们可以利用这一特性，创建一个临时的DOM元素，将包含HTML实体的字符串赋值给它的 innerHTML 属性，然后通过读取其 innerText 属性来获取解码后的纯文本内容。这种方法利用了浏览器原生处理HTML实体的方式，既高效又可靠。
基本实现步骤：
- 创建一个临时的 div 元素（或其他块级元素）。
- 将包含HTML实体的字符串赋值给该元素的 innerHTML 属性。
- 从该元素的 innerText 属性中读取解码后的字符串。
示例代码：
// 假设我们从后端接收到包含HTML实体的字符串
const encodedString = 'pokémon';
// 1. 创建一个临时的DOM元素
const tempDiv = document.createElement('div');
// 2. 将包含HTML实体的字符串赋值给其 innerHTML
tempDiv.innerHTML = encodedString;
// 3. 从 innerText 读取解码后的字符串
const decodedString = tempDiv.innerText;
console.log(decodedString); // 输出: pokémon在这个例子中，当 tempDiv.innerHTML 被设置为 pokémon 时，浏览器会自动解析 é 这个HTML数字实体，并将其渲染为 é。随后，当我们访问 tempDiv.innerText 时，它返回的是这个元素内部的纯文本内容，即已解码的 pokémon。
封装可复用的解码函数
为了提高代码的复用性和可维护性，我们可以将上述逻辑封装成一个独立的函数。通过使用立即执行函数表达式（IIFE）和闭包，我们可以创建一个单例的DOM元素，避免在每次解码时都创建新的元素，从而优化性能。
可复用函数示例：
/** * 将包含HTML实体的字符串解码为普通文本。 * 利用浏览器内置DOM解析器进行解码。 * @param {string} text - 包含HTML实体的字符串。 * @returns {string} 解码后的纯文本字符串。 */ const normalizeText = (() => { // 在闭包中创建一个临时的DOM元素，只创建一次 const tempDiv = document.createElement('div'); /** * 内部函数，执行实际的解码操作。 * @param {string} t - 待解码的字符串。 * @returns {string} 解码后的字符串。 */ return t => { tempDiv.innerHTML = t; // 设置 innerHTML，浏览器自动解析实体 return tempDiv.innerText; // 获取解码后的纯文本 }; })(); // 使用封装后的函数 console.log(normalizeText('pokémon')); // 输出: pokémon console.log(normalizeText('Hello & World!')); // 输出: Hello & World! console.log(normalizeText('zuojiankuohaophpcndivyoujiankuohaophpcnTestzuojiankuohaophpcn/divyoujiankuohaophpcn')); // 输出: Test
览器内置DOM解析器进行解码。
* @param {string} text - 包含HTML实体的字符串。
* @returns {string} 解码后的纯文本字符串。
*/
const normalizeText = (() => {
// 在闭包中创建一个临时的DOM元素，只创建一次
const tempDiv = document.createElement('div');
/**
* 内部函数，执行实际的解码操作。
* @param {string} t - 待解码的字符串。
* @returns {string} 解码后的字符串。
*/
return t => {
tempDiv.innerHTML = t; // 设置 innerHTML，浏览器自动解析实体
return tempDiv.innerText; // 获取解码后的纯文本
};
})();
// 使用封装后的函数
console.log(normalizeText('pokémon')); // 输出: pokémon
console.log(normalizeText('Hello & World!')); // 输出: Hello & World!
console.log(normalizeText('zuojiankuohaophpcndivyoujiankuohaophpcnTestzuojiankuohaophpcn/divyoujiankuohaophpcn')); // 输出: Test这个 normalizeText 函数利用了闭包的特性，使得 tempDiv 元素只在函数初始化时创建一次，而不是每次调用 normalizeText 时都创建。这对于频繁进行字符串解码的场景来说，能够带来一定的性能提升。
注意事项
- 运行环境： 这种方法依赖于浏览器环境的DOM API。因此，它不适用于Node.js等非浏览器环境。在Node.js中，你需要使用专门的库（如 he 或 html-entities）来处理HTML实体解码。
- 安全性： 将外部字符串赋值给 innerHTML 属性时，需要警惕潜在的跨站脚本攻击（XSS）。然而，在此场景下，我们的目的是将已知的HTML实体解码为纯文本，而不是执行HTML标签或脚本。innerText 属性会自动剥离所有HTML标签，只保留纯文本内容，因此在这种特定用途下是相对安全的。如果目标是将用户提供的HTML字符串安全地渲染到页面上，则需要更严格的净化（sanitization）措施。
- 性能： 虽然创建和操作DOM元素会有一定的开销，但对于大多数前端应用来说，这种方法通常足够高效。尤其是在封装成可复用函数并避免重复创建DOM元素后，性能影响进一步降低。
- 字符集： 确保你的HTML页面和服务器响应都正确地声明和使用了UTF-8字符集，以避免更复杂的编码问题。
总结
利用浏览器内置的DOM解析器，通过 document.createElement、innerHTML 和 innerText 属性，是JavaScript中一种简洁、高效且可靠的HTML实体解码方法。这种方法尤其适用于处理从后端接收到的、包含HTML实体编码的字符串。通过将解码逻辑封装成可复用的函数，可以进一步提高代码的整洁性和执行效率。在实际开发中，理解并掌握这种技巧，将有助于更好地处理前端的字符编码问题。
