本教程详细介绍了如何在前端javascript环境中，将包含html实体（如`é`）的字符串转换为其对应的可读字符（如`é`）。通过利用浏览器内置的dom解析器，我们可以高效、安全地解码这些特殊字符，确保文本内容的正确显示，并提供可复用的工具函数实现，以简化开发流程。
在现代Web开发中，我们经常会遇到从后端接口接收到的字符串中包含HTML实体编码的情况，例如将“pokémon”编码为“pokémon”。尽管HTML实体在某些场景下有助于确保文本的正确传输和显示，但在前端展示时，我们通常需要将其解码回原始的可读字符。直接显示这些实体会影响用户体验，因此，掌握一种可靠的解码方法至关重要。
利用浏览器内置DOM解析器进行解码
解决此问题的最简洁有效的方法是利用浏览器内置的DOM（Document Object Model）解析器。DOM解析器能够理解并渲染HTML字符串，其核心思想是创建一个临时的DOM元素，将包含HTML实体的字符串赋值给该元素的innerHTML属性，然后从该元素的innerText属性中读取解码后的纯文本。
基本实现步骤
- 创建临时DOM元素： 在JavaScript中，我们可以动态创建一个不附加到文档流中的div元素。
- 设置innerHTML： 将含有HTML实体的字符串赋值给这个临时元素的innerHTML属性。浏览器引擎会自动解析其中的HTML实体。
- 读取innerText： 从这个临时元素的innerText属性中读取内容。此时，所有HTML实体都已经被解码为对应的字符。
下面是一个基本的示例代码：
// 假设从后端接收到的字符串是 'pokémon'
const encodedString = 'pokémon';
// 1. 创建一个临时的div元素
const tempDiv = document.createElement('div');
// 2. 将编码字符串设置为其innerHTML
tempDiv.innerHTML = encodedString;
// 3. 从innerText中获取解码后的字符串
const decodedString = tempDiv.innerText;
console.log(decodedString); // 输出: pokémon这种方法简单直接，利用了浏览器本身处理HTML的强大能力，避免了手动编写复杂的实体解析逻辑。
立即学习“前端免费学习笔记（深入）”；
封装为可复用的工具函数
为了提高代码的可维护性和复用性，我们可以将上述逻辑封装成一个独立的函数。通过使用闭包（closure）技术，我们甚至可以优化性能，避免每次调用时都重新创建DOM元素。
/**
* 创建一个用于解码HTML实体的工具函数。
* 该函数利用闭包缓存一个临时的DOM元素，以提高性能。
* @returns {function(string): string} 一个接收编码字符串并返回解码字符串的函数。
*/
const normalizeText = (() => {
// 在闭包内部创建并缓存一个临时的div元素
const tempDiv = document.createElement('div');
/**
* 解码包含HTML实体的字符串。
* @param {string} encodedText 包含HTML实体的字符串，例如 'pokémon'。
* @returns {string} 解码后的纯文本字符串，例如 'pokémon'。
*/
return (encodedText) => {
// 每次调用时，更新innerHTML并读取innerText
tempDiv.innerHTML = encodedText;
return tempDiv.innerText;
};
})();
// 使用封装后的函数进行解码
console.log(normalizeText('pokémon')); // 输出: pokémon
console.log(normalizeText('© Copyright 2023')); // 输出: © Copyright 2023
console.log(normalizeText('<div>Hello</div>')); // 输出: <div>Hello</div>在这个封装的函数中，tempDiv只在normalizeText函数初始化时创建一次。后续每次调用normalizeText(encodedText)时，都只是重用这个已存在的tempDiv元素，更新其innerHTML并读取innerText，从而减少了DOM操作的开销，提升了性能。
注意事项
- 浏览器环境依赖： 这种方法依赖于浏览器提供的document对象和DOM操作能力，因此它主要适用于前端JavaScript环境（如浏览器、Web Workers）。在Node.js等非浏览器环境中，需要使用专门的HTML解析库（如jsdom）或字符串替换方法。
- 安全性考量（XSS）： 尽管本教程的目的是解码已知的HTML实体，但将任意不受信任的字符串直接赋值给innerHTML存在跨站脚本攻击（XSS）的风险。如果你的输入字符串可能包含恶意脚本，并且你需要将其渲染到页面上，务必在赋值给innerHTML之前进行严格的消毒处理。然而，对于本场景中仅用于解码HTML实体以获取纯文本的情况，由于最终读取的是innerText，而非将innerHTML直接渲染到页面，因此风险相对较低。
- 字符编码： 确保你的HTML页面meta标签声明的字符编码（通常是UTF-8）与后端返回的数据编码一致，这有助于避免在解码过程中出现乱码问题。
总结
通过利用浏览器内置的DOM解析器，我们可以高效、简洁地将包含HTML实体编码的字符串转换为可读的纯文本。无论是简单的直接实现，还是通过闭包封装的优化工具函数，这种方法都为前端开发者提供了一个可靠的解决方案，确保了文本内容的正确显示，提升了用户体验。在实际项目中，推荐使用封装后的工具函数，以提高代码的复用性和维护性。
