我有一些与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/
诊断这个问题的其他方法是什么?
当前回答
CMS的答案很好，除非你想要取消转义的HTML非常长，超过65536个字符。因为在Chrome中，内部HTML被分割成许多子节点，每个子节点最长65536个，你需要将它们连接起来。这个函数也适用于很长的字符串:
function unencodeHtmlContent(escapedHtml) {
var elem = document.createElement('div');
elem.innerHTML = escapedHtml;
var result = '';
// Chrome splits innerHTML into many child nodes, each one at most 65536.
// Whereas FF creates just one single huge child node.
for (var i = 0; i < elem.childNodes.length; ++i) {
result = result + elem.childNodes[i].nodeValue;
}
return result;
}
有关innerHTML最大长度的更多信息，请参阅以下答案:https://stackoverflow.com/a/27545633/694469
其他回答
一个javascript解决方案，捕捉常见的:
var map = {amp: '&', lt: '<', gt: '>', quot: '"', '#039': "'"}
str = str.replace(/&([^;]+);/g, (m, c) => map[c])
这是https://stackoverflow.com/a/4835406/2738039的反面
CMS的答案很好，除非你想要取消转义的HTML非常长，超过65536个字符。因为在Chrome中，内部HTML被分割成许多子节点，每个子节点最长65536个，你需要将它们连接起来。这个函数也适用于很长的字符串:
function unencodeHtmlContent(escapedHtml) {
var elem = document.createElement('div');
elem.innerHTML = escapedHtml;
var result = '';
// Chrome splits innerHTML into many child nodes, each one at most 65536.
// Whereas FF creates just one single huge child node.
for (var i = 0; i < elem.childNodes.length; ++i) {
result = result + elem.childNodes[i].nodeValue;
}
return result;
}
有关innerHTML最大长度的更多信息，请参阅以下答案:https://stackoverflow.com/a/27545633/694469
如果你正在使用jQuery:
function htmlDecode(value){
return $('<div/>').html(value).text();
}
否则，使用Strictly Software的Encoder对象，它有一个很棒的htmlDecode()函数。
jQuery将为您编码和解码。但是，您需要使用textarea标签，而不是div。
var str1 = 'One & two & three'; var str2 = "One & two & three"; $(document).ready(function() { $("#encoded").text(htmlEncode(str1)); $("#decoded").text(htmlDecode(str2)); }); 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> <div id="encoded"></div> <div id="decoded"></div>
var htmlEnDeCode = (function() {
var charToEntityRegex,
entityToCharRegex,
charToEntity,
entityToChar;
function resetCharacterEntities() {
charToEntity = {};
entityToChar = {};
// add the default set
addCharacterEntities({
'&' : '&',
'>' : '>',
'<' : '<',
'"' : '"',
''' : "'"
});
}
function addCharacterEntities(newEntities) {
var charKeys = [],
entityKeys = [],
key, echar;
for (key in newEntities) {
echar = newEntities[key];
entityToChar[key] = echar;
charToEntity[echar] = key;
charKeys.push(echar);
entityKeys.push(key);
}
charToEntityRegex = new RegExp('(' + charKeys.join('|') + ')', 'g');
entityToCharRegex = new RegExp('(' + entityKeys.join('|') + '|&#[0-9]{1,5};' + ')', 'g');
}
function htmlEncode(value){
var htmlEncodeReplaceFn = function(match, capture) {
return charToEntity[capture];
};
return (!value) ? value : String(value).replace(charToEntityRegex, htmlEncodeReplaceFn);
}
function htmlDecode(value) {
var htmlDecodeReplaceFn = function(match, capture) {
return (capture in entityToChar) ? entityToChar[capture] : String.fromCharCode(parseInt(capture.substr(2), 10));
};
return (!value) ? value : String(value).replace(entityToCharRegex, htmlDecodeReplaceFn);
}
resetCharacterEntities();
return {
htmlEncode: htmlEncode,
htmlDecode: htmlDecode
};
})();
这是ExtJS的源代码。
