Unescape HTML实体在JavaScript?

我有一些与XML-RPC后端通信的JavaScript代码。 XML-RPC返回如下形式的字符串:

<img src='myimage.jpg'>

然而，当我使用JavaScript将字符串插入到HTML中时，它们会逐字呈现。我看到的不是图像，而是字符串:

<img src='myimage.jpg'>

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

如何在JavaScript中解除字符串转义?我尝试了这个页面上的技巧，但没有成功:http://paulschreiber.com/blog/2008/09/20/javascript-how-to-unescape-html-entities/

诊断这个问题的其他方法是什么?

当前回答

克里斯的回答很好，很优雅，但如果值未定义就失败了。简单的改进就能让它稳固:

function htmlDecode(value) {
   return (typeof value === 'undefined') ? '' : $('<div/>').html(value).text();
}

其他回答

要在JavaScript中解转义HTML实体*，你可以使用小型库HTML -escaper: npm install HTML -escaper

import {unescape} from 'html-escaper';

unescape('escaped string');

或从Lodash或下划线unescape函数，如果你正在使用它。

*)请注意，这些函数并不涵盖所有HTML实体，而只是最常见的，即&，<，>，'，"。要解除所有HTML实体的转义，您可以使用库。

这个问题没有指定x的来源，但如果可以的话，它有意义，可以防御恶意(或来自我们自己的应用程序的意外)输入。例如，假设x的值为&< >脚本alert('你好');> < /脚本。在jQuery中处理这个问题的一个安全而简单的方法是:

var x    = "&amp; <script>alert('hello');</script>";
var safe = $('<div />').html(x).text();

// => "& alert('hello');"

可以通过https://gist.github.com/jmblog/3222899找到。我想不出有什么理由不使用这个解决方案，因为它至少和其他解决方案一样短(如果不是更短的话)，并且提供了对XSS的防御。

(我最初是作为评论发布这篇文章的，但由于同一线程中的后续评论要求我这样做，所以我将其作为回答添加进来)。

jQuery将为您编码和解码。但是，您需要使用textarea标签，而不是div。

不是对你的问题的直接回应，但它不是更好为您的RPC返回一些结构(是XML或JSON或其他)与那些图像数据(在您的例子中的url)在该结构?

然后你可以在javascript中解析它，并使用javascript本身构建<img>。

你从RPC接收到的结构可能是这样的:

{"img" : ["myimage.jpg", "myimage2.jpg"]}

我认为这样更好，因为将来自外部源代码的代码注入您的页面看起来不太安全。想象一下，有人劫持了您的XML-RPC脚本，并在其中放入了一些您不想要的东西(甚至是一些javascript……)

你需要解码所有编码的HTML实体或只是&本身?

如果你只需要处理&然后你可以这样做:

var decoded = encoded.replace(/&amp;/g, '&');

如果你需要解码所有HTML实体，那么你可以不使用jQuery:

var elem = document.createElement('textarea');
elem.innerHTML = encoded;
var decoded = elem.value;

请注意下面Mark的评论，他强调了这个答案早期版本中的安全漏洞，并建议使用textarea而不是div来减轻潜在的XSS漏洞。无论使用jQuery还是纯JavaScript，这些漏洞都存在。

推荐文章