我有一些与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/

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


当前回答

编辑:你应该像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中的视图)上所证明的那样。上面的版本适用于所有输入。

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

其他回答

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

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

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

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

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

函数decodeHTMLContent(htmlText) { var txt = document.createElement("span"); 三种。innerHTML = htmlText; 返回txt.innerText; } var result = decodeHTMLContent('One &两个,三个“); console.log(结果);

我在我的项目中使用了这个方法:受到其他答案的启发,但有一个额外的安全参数,在处理装饰字符时很有用

var decodeEntities=(function(){

    var el=document.createElement('div');
    return function(str, safeEscape){

        if(str && typeof str === 'string'){

            str=str.replace(/\</g, '&lt;');

            el.innerHTML=str;
            if(el.innerText){

                str=el.innerText;
                el.innerText='';
            }
            else if(el.textContent){

                str=el.textContent;
                el.textContent='';
            }

            if(safeEscape)
                str=str.replace(/\</g, '&lt;');
        }
        return str;
    }
})();

它的可用性如下:

var label='safe <b> character &eacute;ntity</b>';
var safehtml='<div title="'+decodeEntities(label)+'">'+decodeEntities(label, true)+'</div>';

从JavaScript解释HTML(文本或其他)的一个更现代的选项是DOMParser API中的HTML支持(参见MDN)。这允许您使用浏览器的原生HTML解析器将字符串转换为HTML文档。自2014年底以来,所有主流浏览器的新版本都支持它。

如果我们只想解码一些文本内容,我们可以把它作为文档主体中的唯一内容,解析文档,并取出它的.body. textcontent。

var encodedStr = 'hello &amp; world'; var parser = new DOMParser; var dom = parser.parseFromString( '<!doctype html><body>' + encodedStr, “文本/html”); var decodedString = dom.body.textContent; console.log(解码字符串);

我们可以在DOMParser规范草案中看到,JavaScript没有为被解析的文档启用,因此我们可以在没有安全问题的情况下执行文本转换。

parseFromString(str, type)方法必须运行这些步骤,具体取决于类型: “text / html” 使用HTML解析器解析str,并返回新创建的Document。 脚本标记必须设置为“disabled”。 请注意 脚本元素被标记为不可执行,noscript的内容被解析为标记。

这超出了这个问题的范围,但是请注意,如果您使用已解析的DOM节点本身(不仅仅是它们的文本内容)并将它们移动到活动文档DOM,那么它们的脚本可能会被重新启用,并且可能存在安全问题。我还没有研究过,所以请谨慎行事。

元素。innerText也可以做到这一点。