解码其中包含特殊HTML实体的字符串的正确方法是什么?[重复]

2020/10/15 10:41 · javascript ·  · 0评论

假设我从服务请求中获取了一些JSON,如下所示:

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

我不确定为什么撇号会像这样编码('); 我所知道的是我想对其进行解码。

这是一种使用jQuery的方法,它突然出现在我的脑海:

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

不过,这似乎(非常)骇人听闻。有什么更好的方法?有没有“正确”的方法?

这是我最喜欢的解码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>

不要使用DOM来做到这一点。使用DOM解码HTML实体(如当前接受的答案所建议)会导致跨浏览器结果的差异

对于根据HTML标准的算法解码字符引用一个强大的和确定性的解决方案,使用的库从其自述文件:

(对于“ 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."

免责声明:我是he图书馆的作者

有关更多信息,请参见此堆栈溢出答案

如果您不想使用html / dom,则可以使用正则表达式。我还没有测试过 但有些类似的东西:

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/

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>

有JS函数可以处理&#xxxx样式化的实体:
GitHub上的函数

// 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 = '高级程序设计';
console.log(decodeHtmlEntity(entity) === str);
console.log(encodeHtmlEntity(str) === entity);
// output:
// true
// true

_.unescape 做你想要的

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

这是一个很好的答案。您可以将其与如下所示的angular一起使用:

 moduleDefinitions.filter('sanitize', ['$sce', function($sce) {
    return function(htmlCode) {
        var txt = document.createElement("textarea");
        txt.innerHTML = htmlCode;
        return $sce.trustAsHtml(txt.value);
    }
}]);
本文地址:http://javascript.askforanswer.com/jiemaqizhongbaohanteshuhtmlshitidezifuchuandezhengquefangfashishenmezhongfu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!