什么是解码字符串的正确方法，有特殊的HTML实体在里面?

假设我从一个服务请求中得到了一些JSON，看起来像这样:

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

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

下面是我突然想到的一个使用jQuery的方法:

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

不过，这似乎(非常)俗气。还有什么更好的办法吗?有“正确”的方法吗?

338299 次浏览
小开
最佳答案

这是我最喜欢的解码HTML字符的方法。使用此代码的优点是还保留了标记。

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

例如:http://jsfiddle.net/k65s3/

输入:

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

输出:

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

如果你不想使用html/dom，你可以使用regex。我还没有测试过;但是有些事情是这样的:

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/

小开
有一个JS函数来处理, # xxxx样式的实体 函数在GitHub < / p > 

// 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 = '&#39640;&#32423;&#31243;&#24207;&#35774;&#35745;';
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>

小开

如果您关心遗留兼容性，就不要使用DOM来完成此操作。使用DOM解码HTML实体(如当前接受的答案所建议的那样)导致在非现代浏览器上跨浏览器结果的差异。

强健的&根据HTML标准中的算法解码字符引用的确定性解决方案，使用he库。从它的自述:

他(用于“HTML实体”)是一个用JavaScript编写的健壮的HTML实体编码器/解码器。它支持所有标准化的命名字符引用，按照HTML，处理模糊与符号和其他边缘情况就像浏览器一样，有一个广泛的测试套件，并且-与许多其他JavaScript解决方案相反- 他处理星体Unicode符号很好。有一个在线演示。

下面是你如何使用它:

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

声明:我是他库的作者。

更多信息见这个堆栈溢出的答案。

小开

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("&lt;img src onerror='alert(0)'&gt;"));
});
</script>


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

小开

这是一个很好的答案。你可以像这样使用angular:

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

_.unescape做你正在寻找的

https://lodash.com/docs/#unescape


提交答案