在 JavaScript 中转义 HTML 实体

发布于12月16日

我有一些与XML-RPC后端通信的JavaScript代码.

<img src='myimage.jpg'>

然而，当我使用JavaScript将字符串插入HTML时，它们会按字面意思呈现.我没有看到图像，我只是看到了字符串:

<img src='myimage.jpg'>

我猜HTML是通过XML-RPC通道转义的.

如何在JavaScript中取消对字符串的扫描？我try 了这个页面上的技巧，但没有成功:http://paulschreiber.com/blog/2008/09/20/javascript-how-to-unescape-html-entities/

诊断问题的其他方法有哪些？

推荐答案

EDIT:您应该使用DOMParser API作为Wladimir suggests，我编辑了我之前的答案，因为发布的函数引入了一个安全漏洞.

以下片段是旧答案的代码，稍作修改:使用textarea而不是div可以减少XSS漏洞，但在IE9和Firefox中仍然存在问题.

function htmlDecode(input){
  var e = document.createElement('textarea');
  e.innerHTML = input;
  // handle case of empty input
  return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}

htmlDecode("&lt;img src='myimage.jpg'&gt;"); 
// returns "<img src='myimage.jpg'>"

基本上，我以编程方式创建DOM元素，将编码的HTML分配给其innerHTML，并从innerHTML插入中创建的文本 node 中检索nodeValue.由于它只创建一个元素，但从不添加它，因此不会修改任何站点HTML.

它将跨浏览器(包括旧浏览器)工作，并接受所有HTML Character Entities个.

编辑:此代码的旧版本在输入为空的IE上不起作用，如here on jsFiddle(IE中的视图)所示.以上版本适用于所有输入.

更新:这似乎不适用于大字符串，它还引入了security vulnerability，请参阅注释.