JavaScript另类方法实现htmlencode()与htmldecode()函数实例分析

木白

发布时间：2026-10-13| 3人浏览过

原创

本文分享一种利用浏览器DOM特性实现的JavaScript HTML编码与解码方案。该方法避免了冗长的正则表达式替换，能够自动处理复杂的字符实体及Unicode编码，提供更为简洁高效的解决方案。

传统正则替换的局限性

在JavaScript中进行HTML字符串的编码和解码时，最常见的方法是采用正则表达式逐一替换特殊字符。例如在处理 htmldecode 时，需要反转的情况非常多：

常见实体：如 < (<)、> (>)、& (&)。
空格与其他实体：如  、© (©)、" (”)、® (®) 等数十个字符实体。
Unicode编码：包括十进制形式如 A、中，以及十六进制形式如 中。

若试图列举并逐个替换所有情况，不仅会导致代码冗长、效率低下，还极易遗漏某些特殊字符或编码格式。因此，寻找一种通用且自动化的方法是解决该问题的关键。

基于DOM元素的另类实现思路

浏览器在解析HTML结构时，会自动完成字符解码（将实体转换为字符）以及字符编码（将特殊字符转换为安全显示形态）。我们可以利用这一机制，通过创建一个临时的DOM容器来实现编码和解码功能。

HTML编码原理

编码的核心在于“让浏览器自动转义”。具体步骤如下：

创建一个临时的 div 元素作为容器。
调用 document.createTextNode() 将原始文本转化为文本节点，这样浏览器会保留文本原样。
将该文本节点追加到容器中。
读取容器的 innerHTML。

当从容器获取 innerHTML 时，浏览器会自动将文本中的 <、>、& 等特殊符号转为对应的HTML实体。

HTML解码原理

解码的核心在于“让浏览器自动还原”。具体步骤如下：

创建一个临时的 div 元素作为容器。
直接将包含实体或编码的字符串赋值给容器的 innerHTML，此时浏览器会解析这些内容并生成实际的DOM子节点。
读取容器的 innerText 或 textContent，从而获取解码后的纯文本。

这种方法的优势在于无需关心具体的字符类型，只要浏览器能识别该实体，即可正确转换。

具体代码实现

基于上述原理，可以实现以下两个简洁的函数：

function htmlencode(s){
  var div = document.createElement('div');
  div.appendChild(document.createTextNode(s));
  return div.innerHTML;
}

function htmldecode(s){
  var div = document.createElement('div');
  div.innerHTML = s;
  return div.innerText || div.textContent;
}

测试与注意事项

为了验证效果，可以构建一个测试场景。例如：

// 测试编码
console.log(htmlencode('<p> & </p>'));
// 输出: &lt;p&gt; &amp; &lt;/p&gt;

// 测试解码（注意入参必须是合法的HTML编码字符串）
console.log(htmldecode('&lt;p&gt; &amp; &copy; &#65;&#66;&#67; &#20013;&#25991; &#x4E2D;&#x6587; &lt;/p&gt;'));
// 输出: <p> & © ABC 中文 中文 </p>

在使用 htmldecode 时需特别注意：入参必须是通过标准方式编码后的结果。如果传入未进行任何转义的普通文本或格式错误的编码串，由于浏览器的DOM解析器无法找到匹配的闭合标签或实体定义，可能无法得到预期的纯文本结果，甚至出现解析异常。

相比传统的正则逐个替换，这种借助原生DOM特性的方法在代码可读性、执行效率和字符覆盖面上都有显著提升。

以上就是javascript另类方法实现htmlencode()与htmldecode()函数的详细内容，更多关于javascript dom操作资料请关注本站其它相关文章！