HTML实体解码

Question

如何使用JavaScript或JQuery对HTML实体进行编码和解码？

var varTitle = "Chris' corner";

我希望它是:

var varTitle = "Chris' corner";

Answer 1

我建议不要使用被接受作为答案的jQuery代码.虽然它不会将字符串插入到页面中进行解码,但它确实会导致创建脚本和HTML元素等内容.这比我们需要的代码更多.相反,我建议使用更安全,更优化的功能.

var decodeEntities = (function() {
  // this prevents any overhead from creating the object each time
  var element = document.createElement('div');

  function decodeHTMLEntities (str) {
    if(str && typeof str === 'string') {
      // strip script/html tags
      str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
      str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
      element.innerHTML = str;
      str = element.textContent;
      element.textContent = '';
    }

    return str;
  }

  return decodeHTMLEntities;
})();

http://jsfiddle.net/LYteC/4/

要使用此函数,只需调用decodeEntities("&")它将使用与jQuery版本相同的基础技术,但不需要jQuery的开销,并且在清理输入中的HTML标记之后.请参阅Mike Samuel对如何过滤HTML标记的已接受答案的评论.

通过在项目中添加以下行,可以将此函数轻松用作jQuery插件.

jQuery.decodeEntities = decodeEntities;

Answer 2

你可以尝试类似的东西:

var Title = $('<textarea />').html("Chris&apos; corner").text();
console.log(Title);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

JS小提琴.

更具互动性的版本:

$('form').submit(function() {
  var theString = $('#string').val();
  var varTitle = $('<textarea />').html(theString).text();
  $('#output').text(varTitle);
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
  <fieldset>
    <label for="string">Enter a html-encoded string to decode</label>
    <input type="text" name="string" id="string" />
  </fieldset>
  <fieldset>
    <input type="submit" value="decode" />
  </fieldset>
</form>

<div id="output"></div>

JS小提琴.

Answer 3

就像Robert K所说,不要使用jQuery.html().text()解码html实体,因为它不安全,因为用户输入永远不能访问DOM.阅读XSS,了解这是不安全的原因.

而是尝试使用escape和unescape方法的Underscore.js实用程序带库:

_.escape(串)

逸出用于插入到HTML字符串,替换&,<,>,",`,和'字符.

_.escape('Curly, Larry & Moe');
=> "Curly, Larry & Moe"

_.unescape(串)

逃跑的相反,替代&,<,>,",`和'与他们同行的转义.

_.unescape('Curly, Larry & Moe');
=> "Curly, Larry & Moe"

要支持解码更多字符,只需复制Underscore unescape方法并向地图添加更多字符即可.

Answer 4

这是一个快速方法,不需要创建div,并解码"最常见"的HTML转义字符:

function decodeHTMLEntities(text) {
    var entities = [
        ['amp', '&'],
        ['apos', '\''],
        ['#x27', '\''],
        ['#x2F', '/'],
        ['#39', '\''],
        ['#47', '/'],
        ['lt', '<'],
        ['gt', '>'],
        ['nbsp', ' '],
        ['quot', '"']
    ];

    for (var i = 0, max = entities.length; i < max; ++i) 
        text = text.replace(new RegExp('&'+entities[i][0]+';', 'g'), entities[i][1]);

    return text;
}

Answer 5

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

Answer 6

受Robert K的解决方案的启发,此版本不会删除HTML标记,并且同样安全.

var decode_entities = (function() {
    // Remove HTML Entities
    var element = document.createElement('div');

    function decode_HTML_entities (str) {

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

            // Escape HTML before decoding for HTML Entities
            str = escape(str).replace(/%26/g,'&').replace(/%23/g,'#').replace(/%3B/g,';');

            element.innerHTML = str;
            if(element.innerText){
                str = element.innerText;
                element.innerText = '';
            }else{
                // Firefox support
                str = element.textContent;
                element.textContent = '';
            }
        }
        return unescape(str);
    }
    return decode_HTML_entities;
})();

Answer 7

这是另一个版本:

function convertHTMLEntity(text){
    const span = document.createElement('span');

    return text
    .replace(/&[#A-Za-z0-9]+;/gi, (entity,position,text)=> {
        span.innerHTML = entity;
        return span.innerText;
    });
}

console.log(convertHTMLEntity('Large < £ 500'));

Answer 8

jQuery提供了一种编码和解码html实体的方法.

如果您使用"<div />"标记,它将删除所有html.

function htmlDecode(value) {
    return $("<div/>").html(value).text();
}

function htmlEncode(value) {
    return $('<div/>').text(value).html();
}

如果使用"<textarea />"标记,它将保留html标记.

function htmlDecode(value) {
    return $("<textarea/>").html(value).text();
}

function htmlEncode(value) {
    return $('<textarea/>').text(value).html();
}

Answer 9

为了将另一个"灵感来自Robert K"添加到列表中,这是另一个不剥离HTML标记的安全版本.它不是通过HTML解析器运行整个字符串,而是仅提取实体并转换它们.

var decodeEntities = (function() {
    // this prevents any overhead from creating the object each time
    var element = document.createElement('div');

    // regular expression matching HTML entities
    var entity = /&(?:#x[a-f0-9]+|#[0-9]+|[a-z0-9]+);?/ig;

    return function decodeHTMLEntities(str) {
        // find and replace all the html entities
        str = str.replace(entity, function(m) {
            element.innerHTML = m;
            return element.textContent;
        });

        // reset the value
        element.textContent = '';

        return str;
    }
})();

Answer 10

将不受信任的HTML注入页面是危险的,如如何使用jQuery解码HTML实体中所述？.

另一种方法是使用PHP的html_entity_decode的JavaScript专用实现(来自http://phpjs.org/functions/html_entity_decode:424).这个例子就像这样:

var varTitle = html_entity_decode("Chris' corner");

Answer 11

灵感来自Robert K的解决方案,剥离html标签并阻止执行脚本和事件处理程序,如:<img src=fake onerror="prompt(1)"> 在最新的Chrome,FF,IE上测试(应该在IE9上运行,但尚未测试).

var decodeEntities = (function () {
        //create a new html document (doesn't execute script tags in child elements)
        var doc = document.implementation.createHTMLDocument("");
        var element = doc.createElement('div');

        function getText(str) {
            element.innerHTML = str;
            str = element.textContent;
            element.textContent = '';
            return str;
        }

        function decodeHTMLEntities(str) {
            if (str && typeof str === 'string') {
                var x = getText(str);
                while (str !== x) {
                    str = x;
                    x = getText(x);
                }
                return x;
            }
        }
        return decodeHTMLEntities;
    })();

只需致电:

decodeEntities('<img src=fake onerror="prompt(1)">');
decodeEntities("<script>alert('aaa!')</script>");

Answer 12

这是完整版

function htmldecode(s){
    window.HTML_ESC_MAP = {
    "nbsp":" ","iexcl":"¡","cent":"¢","pound":"£","curren":"¤","yen":"¥","brvbar":"¦","sect":"§","uml":"¨","copy":"©","ordf":"ª","laquo":"«","not":"¬","reg":"®","macr":"¯","deg":"°","plusmn":"±","sup2":"²","sup3":"³","acute":"´","micro":"µ","para":"¶","middot":"·","cedil":"¸","sup1":"¹","ordm":"º","raquo":"»","frac14":"¼","frac12":"½","frac34":"¾","iquest":"¿","Agrave":"À","Aacute":"Á","Acirc":"Â","Atilde":"Ã","Auml":"Ä","Aring":"Å","AElig":"Æ","Ccedil":"Ç","Egrave":"È","Eacute":"É","Ecirc":"Ê","Euml":"Ë","Igrave":"Ì","Iacute":"Í","Icirc":"Î","Iuml":"Ï","ETH":"Ð","Ntilde":"Ñ","Ograve":"Ò","Oacute":"Ó","Ocirc":"Ô","Otilde":"Õ","Ouml":"Ö","times":"×","Oslash":"Ø","Ugrave":"Ù","Uacute":"Ú","Ucirc":"Û","Uuml":"Ü","Yacute":"Ý","THORN":"Þ","szlig":"ß","agrave":"à","aacute":"á","acirc":"â","atilde":"ã","auml":"ä","aring":"å","aelig":"æ","ccedil":"ç","egrave":"è","eacute":"é","ecirc":"ê","euml":"ë","igrave":"ì","iacute":"í","icirc":"î","iuml":"ï","eth":"ð","ntilde":"ñ","ograve":"ò","oacute":"ó","ocirc":"ô","otilde":"õ","ouml":"ö","divide":"÷","oslash":"ø","ugrave":"ù","uacute":"ú","ucirc":"û","uuml":"ü","yacute":"ý","thorn":"þ","yuml":"ÿ","fnof":"ƒ","Alpha":"?","Beta":"?","Gamma":"?","Delta":"?","Epsilon":"?","Zeta":"?","Eta":"?","Theta":"?","Iota":"?","Kappa":"?","Lambda":"?","Mu":"?","Nu":"?","Xi":"?","Omicron":"?","Pi":"?","Rho":"?","Sigma":"?","Tau":"?","Upsilon":"?","Phi":"?","Chi":"?","Psi":"?","Omega":"?","alpha":"?","beta":"?","gamma":"?","delta":"?","epsilon":"?","zeta":"?","eta":"?","theta":"?","iota":"?","kappa":"?","lambda":"?","mu":"?","nu":"?","xi":"?","omicron":"?","pi":"?","rho":"?","sigmaf":"?","sigma":"?","tau":"?","upsilon":"?","phi":"?","chi":"?","psi":"?","omega":"?","thetasym":"?","upsih":"?","piv":"?","bull":"•","hellip":"…","prime":"?","Prime":"?","oline":"?","frasl":"?","weierp":"?","image":"?","real":"?","trade":"™","alefsym":"?","larr":"?","uarr":"?","rarr":"?","darr":"?","harr":"?","crarr":"?","lArr":"?","uArr":"?","rArr":"?","dArr":"?","hArr":"?","forall":"?","part":"?","exist":"?","empty":"?","nabla":"?","isin":"?","notin":"?","ni":"?","prod":"?","sum":"?","minus":"?","lowast":"?","radic":"?","prop":"?","infin":"?","ang":"?","and":"?","or":"?","cap":"?","cup":"?","int":"?","there4":"?","sim":"?","cong":"?","asymp":"?","ne":"?","equiv":"?","le":"?","ge":"?","sub":"?","sup":"?","nsub":"?","sube":"?","supe":"?","oplus":"?","otimes":"?","perp":"?","sdot":"?","lceil":"?","rceil":"?","lfloor":"?","rfloor":"?","lang":"?","rang":"?","loz":"?","spades":"?","clubs":"?","hearts":"?","diams":"?","\"":"quot","amp":"&","lt":"<","gt":">","OElig":"Œ","oelig":"œ","Scaron":"Š","scaron":"š","Yuml":"Ÿ","circ":"ˆ","tilde":"˜","ndash":"–","mdash":"—","lsquo":"‘","rsquo":"’","sbquo":"‚","ldquo":"“","rdquo":"”","bdquo":"„","dagger":"†","Dagger":"‡","permil":"‰","lsaquo":"‹","rsaquo":"›","euro":"€"};
    if(!window.HTML_ESC_MAP_EXP)
        window.HTML_ESC_MAP_EXP = new RegExp("&("+Object.keys(HTML_ESC_MAP).join("|")+");","g");
    return s?s.replace(window.HTML_ESC_MAP_EXP,function(x){
        return HTML_ESC_MAP[x.substring(1,x.length-1)]||x;
    }):s;
}

用法

htmldecode("∑ >€");

Answer 13

对@William Lahti 的回答更实用的方法：

var entities = {
  'amp': '&',
  'apos': '\'',
  '#x27': '\'',
  '#x2F': '/',
  '#39': '\'',
  '#47': '/',
  'lt': '<',
  'gt': '>',
  'nbsp': ' ',
  'quot': '"'
}

function decodeHTMLEntities (text) {
  return text.replace(/&([^;]+);/gm, function (match, entity) {
    return entities[entity] || match
  })
}