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/

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

当前回答

不客气只是一个信使……全部归功于ourcodeworld.com，链接如下。

window.htmlentities = {
        /**
         * Converts a string to its html characters completely.
         *
         * @param {String} str String with unescaped HTML characters
         **/
        encode : function(str) {
            var buf = [];

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

            return buf.join('');
        },
        /**
         * Converts an html characterSet into its original character.
         *
         * @param {String} str htmlSet entities
         **/
        decode : function(str) {
            return str.replace(/&#(\d+);/g, function(match, dec) {
                return String.fromCharCode(dec);
            });
        }
    };

出处:https://ourcodeworld.com/articles/read/188/encode-and-decode-html-entities-using-pure-javascript

2019-08-05 10:26:07

其他回答

这是我迄今为止尝试过的最全面的解决方案:

const STANDARD_HTML_ENTITIES = {
    nbsp: String.fromCharCode(160),
    amp: "&",
    quot: '"',
    lt: "<",
    gt: ">"
};

const replaceHtmlEntities = plainTextString => {
    return plainTextString
        .replace(/&#(\d+);/g, (match, dec) => String.fromCharCode(dec))
        .replace(
            /&(nbsp|amp|quot|lt|gt);/g,
            (a, b) => STANDARD_HTML_ENTITIES[b]
        );
};

2020-02-13 00:57:01

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

2016-09-28 20:57:21

当前投票最多的答案有从字符串中删除HTML的缺点。如果这不是你想要的(这当然不是问题的一部分)，那么我建议使用正则表达式来查找HTML实体(/&[^;]*;/gmi)，然后遍历匹配并转换它们。

关于XSS攻击:

虽然innerHTML不执行<script>标签中的代码，但有可能在*事件属性中运行代码，因此用户传递的字符串可能会利用上面的正则表达式:

&<img src='asdfa' error='alert(`doin\' me a hack`)' />;

因此，有必要将任何<字符转换为它们的<在将它们放入隐藏的div元素之前。

此外，为了覆盖我所有的基础，我将注意到，在全局作用域中定义的函数可以通过在控制台上重新定义它们来重写，因此使用const定义这个函数或将其放在非全局作用域中非常重要。

注意:以下示例中企图利用的漏洞会使堆栈片段编辑器混淆，因为它所做的预处理，所以您必须在浏览器的控制台中运行它，或者在它自己的文件中运行它才能查看结果。

var tests = [
  "here's a spade: &spades;!",
  "&<script>alert('hackerman')</script>;",
  "&<img src='asdfa' error='alert(`doin\' me a hack`)' />;",
  "<b>&#8593; &#67;&#65;&#78;'&#84;&nbsp;&#72;&#65;&#67;&#75;&nbsp;&#77;&#69;,&nbsp;&#66;&#82;&#79;</b>"
];

var decoded = tests.map(decodeHTMLEntities).join("\n");
console.log(decoded);

结果是:

here's a spade: ♠!
&<script>alert('hackerman')</script>;
&<img src='asdfa' error='alert(`doin' me a hack`)' />;
<b>↑ CAN'T HACK ME, BRO</b>

2023-01-04 19:24:13

我尝试从JSON数组中删除&。上面的例子都不是，但是https://stackoverflow.com/users/2030321/chris提供了一个很好的解决方案，让我解决了我的问题。

var stringtodecode="<B>Hello</B> world<br>";
document.getElementById("decodeIt").innerHTML=stringtodecode;
stringtodecode=document.getElementById("decodeIt").innerText

我没有使用，因为我不知道如何将它插入一个模态窗口，将JSON数据拉到一个数组中，但我确实尝试了基于示例的这一点，并且它工作:

var modal = document.getElementById('demodal');
$('#ampersandcontent').text(replaceAll(data[0],"&amp;", "&"));

我喜欢它，因为它简单，而且有效，但不确定为什么它没有被广泛使用。搜索hi & low找到一个简单的解决方案。我继续寻求对语法的理解，以及使用它是否有任何风险。还什么都没找到。

2018-12-13 17:17:43

编辑:你应该像Wladimir建议的那样使用DOMParser API，我编辑了我之前的答案，因为发布的函数引入了安全漏洞。

下面的代码片段是老答案的代码，只做了一些小修改:使用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插入上创建的文本节点检索nodeValue。因为它只是创建了一个元素，而没有添加它，所以没有修改站点HTML。

它将跨浏览器(包括旧浏览器)工作，并接受所有的HTML字符实体。

编辑:这段代码的旧版本不能在IE空白输入上工作，正如jsFiddle (IE中的视图)上所证明的那样。上面的版本适用于所有输入。

更新:这似乎不工作与大字符串，它也引入了一个安全漏洞，见评论。

2009-12-16 05:33:29

Unescape HTML实体在JavaScript?

推荐文章

最新文章

标签