解码包含特殊 HTML 实体的字符串的正确方法是什么？

Question

假设我从服务请求中返回一些 JSON，如下所示：

{
    "message": "We're unable to complete your request at this time."
}

我不确定为什么撇号是这样编码的 (')；我只知道我想解码它。

我脑海中浮现出一种使用 jQuery 的方法：

function decodeHtml(html) {
    return $('<div>').html(html).text();
}

不过，这看起来（非常）hacky。有什么更好的办法呢？有“正确”的方法吗？

Answer 1

这是我最喜欢的 HTML 字符解码方式。使用此代码的优点是标签也被保留。

function decodeHtml(html) {
    var txt = document.createElement("textarea");
    txt.innerHTML = html;
    return txt.value;
}

示例： http://jsfiddle.net/k65s3/

输入：

Entity: Bad attempt at XSS:<script>alert('new\nline?')</script><br>

输出：

Entity: Bad attempt at XSS:<script>alert('new\nline?')</script><br>

Answer 2

如果您关心遗留兼容性，请不要使用 DOM 来执行此操作。使用 DOM 解码 HTML 实体（如当前接受的答案中所建议的）会导致 非现代浏览器上跨浏览器结果的差异。

对于一个强大的和根据 HTML 标准中的算法解码字符引用的确定性解决方案，请使用 he 库< /a>.来自其自述文件：

he（“HTML 实体”）是一个用 JavaScript 编写的强大的 HTML 实体编码器/解码器。它支持所有符合 HTML 的标准化命名字符引用，处理不明确的＆符号和其他边缘情况就像浏览器一样，有一个广泛的测试套件，并且- 与许多其他 JavaScript 解决方案相反 - 他可以很好地处理星体 Unicode 符号。 提供在线演示。

以下是您如何使用它：

he.decode("We're unable to complete your request at this time.");
→ "We're unable to complete your request at this time."

免责声明：我是他图书馆。

有关更多信息，请参阅此 Stack Overflow 答案。

Answer 3

如果你不想使用 html/dom，你可以使用正则表达式。我还没有测试过这个；但大致如下：

function parseHtmlEntities(str) {
    return str.replace(/&#([0-9]{1,3});/gi, function(match, numStr) {
        var num = parseInt(numStr, 10); // read num as normal number
        return String.fromCharCode(num);
    });
}

[编辑]

注意：这只适用于数字 html 实体，而不适用于像 &oring; 这样的东西。

[编辑2]

修复了功能（一些错别字），在这里测试：http://jsfiddle.net/Be2Bd/1 /

Answer 4

有 JS 函数来处理 &#xxxx 样式的实体：
GitHub 上的函数

// encode(decode) html text into html entity
var decodeHtmlEntity = function(str) {
  return str.replace(/&#(\d+);/g, function(match, dec) {
    return String.fromCharCode(dec);
  });
};

var encodeHtmlEntity = function(str) {
  var buf = [];
  for (var i=str.length-1;i>=0;i--) {
    buf.unshift(['&#', str[i].charCodeAt(), ';'].join(''));
  }
  return buf.join('');
};

var entity = '高级程序设计';
var str = '高级程序设计';

let element = document.getElementById("testFunct");
element.innerHTML = (decodeHtmlEntity(entity));

console.log(decodeHtmlEntity(entity) === str);
console.log(encodeHtmlEntity(str) === entity);
// output:
// true
// true

<div><span id="testFunct"></span></div>

Answer 5

jQuery 将为您编码和解码。

function htmlDecode(value) {
  return $("<textarea/>").html(value).text();
}

function htmlEncode(value) {
  return $('<textarea/>').text(value).html();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("#encoded")
  .text(htmlEncode("<img src onerror='alert(0)'>"));
   $("#decoded")
  .text(htmlDecode("<img src onerror='alert(0)'>"));
});
</script>

<span>htmlEncode() result:</span><br/>
<div id="encoded"></div>
<br/>
<span>htmlDecode() result:</span><br/>
<div id="decoded"></div>

Answer 6

_.unescape 可以满足您的要求

https://lodash.com/docs /#逃逸

Answer 7

这是很好的答案。您可以将其与角度一起使用，如下所示：

 moduleDefinitions.filter('sanitize', ['$sce', function($sce) {
    return function(htmlCode) {
        var txt = document.createElement("textarea");
        txt.innerHTML = htmlCode;
        return $sce.trustAsHtml(txt.value);
    }
}]);