本文介绍了一种在javascript中将html实体（如`é`）转换为标准字符的有效方法。通过利用浏览器内置的dom解析器，我们可以创建一个临时dom元素，将含有实体的字符串设置为其`innerhtml`，然后从`innertext`中读取解码后的纯文本，实现高效且安全的字符转换。
在Web开发中，我们经常会遇到从后端服务接收到的字符串中包含HTML实体编码的情况。例如，一个本应显示为“pokémon”的字符串，可能会以“pokémon”的形式传输。尽管页面可能已声明UTF-8编码，或尝试过使用Normalizer等方法，但这些HTML实体并不会自动转换，导致内容显示不正确。在这种情况下，我们可以巧妙地利用浏览器内置的DOM解析器来解决这个问题。
问题场景分析
当字符串中包含DDD;（十进制数字实体）、HHH;（十六进制数字实体）或&entity_name;（命名实体，如&）等HTML实体时，它们本质上是HTML语法的一部分，而不是简单的编码问题。直接的字符串替换或字符集转换通常无法正确处理这些实体。我们需要一个机制，能够像浏览器渲染HTML一样，将这些实体解析成它们代表的实际字符。
解决方案：利用浏览器DOM解析器
浏览器在渲染HTML时，会自动解析并显示各种HTML实体。我们可以模拟这一过程：创建一个临时的DOM元素，将包含HTML实体的字符串赋值给它的innerHTML属性，然后从该元素的innerText或textContent属性中读取内容。innerText和textContent属性会自动返回经过解码的纯文本内容。
基础实现示例
以下是一个将包含HTML实体的字符串转换为标准字符的基本示例：
立即学习“Java免费学习笔记（深入）”；
// 假设从后端接收到的字符串 const encodedString = 'pokémon'; // 1. 创建一个临时的DOM元素（例如，一个div） const tempDiv = document.createElement('div'); // 2. 将包含HTML实体的字符串赋值给元素的innerHTML // 浏览器会自动解析其中的HTML实体 tempDiv.innerHTML = encodedString; // 3. 从元素的innerText中读取解码后的纯文本 // innerText会返回渲染后的文本内容，不包含HTML标签和实体 const decodedString = tempDiv.innerText; console.log(decodedString); // 输出: pokémon
在这个例子中，document.createElement(‘div’)创建了一个内存中的div元素。将’pokémon’赋值给tempDiv.innerHTML后，浏览器引擎会将其解析为一个包含“é”字符的文本节点。最后，通过tempDiv.innerText我们就能获取到解码后的“pokémon”字符串。
封装为可复用函数
为了提高代码的复用性和效率，我们可以将上述逻辑封装成一个函数。考虑到频繁创建和销毁DOM元素可能带来的性能开销，我们可以使用一个立即执行函数表达式（IIFE）来创建一个闭包，从而复用同一个临时的div元素。
/** * 将包含HTML实体的字符串解码为标准字符。 * 利用浏览器DOM解析器实现。 * @param {string} text - 包含HTML实体的字符串。 * @returns {string} 解码后的标准字符串。 */ const normalizeText = (() => { // 在闭包中只创建一次临时的div元素 const tempDiv = document.createElement('div'); // 返回一个函数，该函数将利用这个临时的div进行解码 return text => { tempDiv.innerHTML = text; // 设置innerHTML，让浏览器解析实体 return tempDiv.innerText; // 获取解码后的纯文本 }; })(); // 使用封装后的函数 console.log(normalizeText('pokémon')); // 输出: pokémon console.log(normalizeText('Hello & World!')); // 输出: Hello & World! console.log(normalizeText('★ Star')); // 输出: ★ Star
这种封装方式确保了tempDiv只被创建一次，后续每次调用normalizeText函数时都复用该元素，从而减少了DOM操作的开销，提高了效率。
注意事项与总结
- 适用场景： 这种方法主要适用于客户端（浏览器环境）的javaScript代码。如果你在node.js等非浏览器环境中工作，需要寻找相应的服务器端库（例如html-entities或unescape等）来实现HTML实体解码。
- 安全性： 当使用innerHTML时，如果输入的字符串来自不可信的外部源，并且不仅仅是解码实体，还可能包含恶意脚本，那么存在跨站脚本（xss）攻击的风险。然而，对于本教程中纯粹的HTML实体解码目的，innerText属性会安全地提取纯文本，不会执行任何脚本。始终确保你的输入源是可信的，或在处理前进行适当的净化。
- 性能： 虽然复用DOM元素可以提高效率，但对于需要处理大量字符串的场景，如果性能成为瓶颈，可以考虑是否有更底层的字符串处理库。不过，对于大多数前端应用来说，这种DOM解析器的方法已经足够高效和简洁。
通过利用浏览器内置的DOM解析器，我们可以优雅且高效地将字符串中的HTML实体转换为其对应的标准字符，从而确保内容在网页上正确显示。这种方法简洁明了，且充分利用了浏览器自身的强大功能。