在前端开发中，有时我们需要通过JavaScript将HTML数据进行编码以便存储或传输。常用的编码方法是encodeURIComponent()函数，它可以将特殊字符和Unicode字符转换为URL安全的编码形式。
例如，在以下示例中，我们将字符串“Hello, world!”编码为URL安全形式：
--- ------------- - -------------------------- --------- --------------------------- -- --- ---------------------
然而，当我们尝试将这个已经被encodeURIComponent()编码的字符串显示回原本的HTML格式的时候，我们会遇到问题。因为encodeURIComponent()函数会将HTML标记符号（如<、>、/等）也进行编码，导致我们无法直接使用该字符串来渲染HTML。
那么，如何解码使用encodeURIComponent()编码的JS中的HTML呢？下面将介绍一些解码方法。
方法1: 使用decodeURIComponent()
最简单的方法是使用内置函数decodeURIComponent()来解析编码后的字符串。例如：
--- ----------- - ------------------------------------- --- ----------- - -------------------------------- ---------------------------------------------- - ------------
上述代码将把编码后的字符串“Hello%2C%20%3Cb%3Eworld%3C/b%3E%21”解码成HTML格式的“Hello, world!”，并将其渲染到ID为“myElement”的HTML元素中。
需要注意的是，decodeURIComponent()函数仅仅解码了encodeURIComponent()编码的字符，并不会对HTML标签进行转义或过滤。因此，如果需要在HTML页面中使用从JS中传递的字符串，建议使用其他方法来确保安全性。
方法2: 使用DOMParser()
另一种解码方法是使用DOMParser()来解析HTML字符串。该方法可以将字符串解析成DOM节点，进而方便地插入到文档中。
例如：
--- ----------- - ------------------------------------- --- ------ - --- ------------ --- --- - --------------------------------- ------------ - ------------ ------------- ----------------------------------------------------------------------
上述代码将把编码后的字符串“Hello%2C%20%3Cb%3Eworld%3C/b%3E%21”解析成一个DOM节点，然后插入到ID为“myElement”的HTML元素中。这样就能直接将HTML代码显示出来了。
需要注意的是，使用DOMParser()时必须确保传入的字符串是完整的HTML文档结构，否则可能会导致解析错误。
总结
在JavaScript中编码和解码HTML数据是前端开发中常用的操作之一，而使用encodeURIComponent()编码HTML数据也是其中的一种常见方式。在需要将编码后的HTML字符串还原回原本格式的时候，我们可以使用内置的decodeURIComponent()函数来解码，也可以使用DOMParser()将其解析成DOM节点。
但在实际项目中，我们需要根据具体场景和需求选择合适的解码方法，并且注意安全性问题。例如，由于JavaScript中的innerHTML属性存在XSS攻击风险，我们应该通过其他方法过滤或转义用户输入的HTML字符串。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31144