我有一些与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/
诊断这个问题的其他方法是什么?
当前回答
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的源代码。
这是我迄今为止尝试过的最全面的解决方案:
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]
);
};
Matthias Bynens有一个这样的库:https://github.com/mathiasbynens/he
例子:
console.log(
he.decode("Jörg & Jürgen rocked to & fro ")
);
// Logs "Jörg & Jürgen rocked to & fro"
我建议使用它，而不是设置元素的HTML内容，然后读取它的文本内容。这种方法是可行的，但如果用于不可信的用户输入，则具有欺骗性的危险，并提供XSS机会。
如果你真的不能忍受在库中加载，你可以使用这个回答中描述的textarea黑客来回答一个几乎重复的问题，这与各种类似的方法不同，没有我所知道的安全漏洞:
function decodeEntities(encodedString) {
var textArea = document.createElement('textarea');
textArea.innerHTML = encodedString;
return textArea.value;
}
console.log(decodeEntities('1 & 2')); // '1 & 2'
但是请注意安全问题，影响类似的方法，我在链接的答案中列出!这种方法是一种hack，将来对文本区域允许内容的更改(或特定浏览器中的错误)可能会导致依赖它的代码有一天突然出现XSS漏洞。
从JavaScript解释HTML(文本或其他)的一个更现代的选项是DOMParser API中的HTML支持(参见MDN)。这允许您使用浏览器的原生HTML解析器将字符串转换为HTML文档。自2014年底以来，所有主流浏览器的新版本都支持它。
如果我们只想解码一些文本内容，我们可以把它作为文档主体中的唯一内容，解析文档，并取出它的.body. textcontent。
var encodedStr = 'hello & 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，那么它们的脚本可能会被重新启用，并且可能存在安全问题。我还没有研究过，所以请谨慎行事。
您可以使用Lodash的unescape / escape功能https://lodash.com/docs/4.17.5#unescape
import unescape from 'lodash/unescape';
const str = unescape('fred, barney, & pebbles');
STR将变成“弗雷德、巴尼和卵石”
