web-dev-qa-db-fra.com

Décodage d'entité HTML

Comment encoder et décoder des entités HTML à l'aide de JavaScript ou de JQuery?

var varTitle = "Chris' corner";

Je veux que ce soit:

var varTitle = "Chris' corner";
javascriptjqueryhtml
221
chris

Vous pouvez essayer quelque chose comme:

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 Fiddle .

Une version plus interactive:

$('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 Fiddle .

204
David Thomas

Je déconseille d'utiliser le code jQuery qui a été accepté comme réponse. Bien qu'il n'insère pas la chaîne à décoder dans la page, il provoque la création d'éléments tels que des scripts et des éléments HTML. C'est beaucoup plus de code que nous avons besoin. Au lieu de cela, je suggère d'utiliser une fonction plus sûre et plus optimisée.

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/

Pour utiliser cette fonction, appelez simplement decodeEntities("&amp;") et il utilisera les mêmes techniques sous-jacentes que la version jQuery, mais sans surcharge de jQuery et après avoir nettoyé les balises HTML de l'entrée. Voir commentaire de Mike Samuel sur la réponse acceptée pour savoir comment filtrer les balises HTML.

Cette fonction peut facilement être utilisée comme plugin jQuery en ajoutant la ligne suivante dans votre projet.

jQuery.decodeEntities = decodeEntities;
246
Robert K

Comme Robert K l'a dit, n'utilisez pas jQuery.html (). Text () pour décoder les entités HTML car il est risqué, car les entrées utilisateur ne doivent jamais avoir accès au DOM. Lisez à propos de XSS pour savoir pourquoi ceci est dangereux.

Essayez plutôt les méthodes nderscore.js , qui incluent les méthodes escape et nescape :

_. escape (string)

Échappe une chaîne à insérer dans HTML en remplaçant les caractères &, <, >, ", ` et '.

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

_. unescape (string)

Le contraire de escape remplace &amp;, &lt;, &gt;, &quot;, &#96; et &#x27; par leurs équivalents non échappés.

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

Pour prendre en charge le décodage de plus de caractères, copiez simplement la méthode Underscore nescape et ajoutez plus de caractères à la carte.

97
Alan Hamlett

Voici une méthode rapide qui ne nécessite pas de créer un div et décode les caractères d'échappement HTML les plus courants:

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;
}
36
William Lahti

Inspirée par la solution de Robert K, cette version ne supprime pas les balises HTML, elle est tout aussi sécurisée.

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;
})();
17
mattcasey

C'est ma manière préférée de décoder les caractères HTML. L'avantage d'utiliser ce code est que les balises sont également préservées.

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

Exemple: http://jsfiddle.net/k65s3/

Contribution:

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

Sortie:

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

jQuery fournit un moyen d'encoder et de décoder des entités HTML.

Si vous utilisez une balise "<div />", cela supprimera tout le code HTML.

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

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

Si vous utilisez une balise "<textarea />", les balises HTML seront conservées.

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

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

voici une autre version:

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 &lt; &#163; 500'));
11
Mirodil

Pour ajouter encore un autre "inspiré par Robert K" à la liste, voici une autre version sûre qui ne supprime pas les balises HTML. Au lieu d'exécuter toute la chaîne via l'analyseur HTML, il extrait uniquement les entités et les convertit.

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;
    }
})();
10
Tyler Johnson

Voici une version complète

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;
}

Usage

htmldecode("&sum;&nbsp;&gt;&euro;");
9
Soyoes

Inspiré par la solution de Robert K, supprime les balises html et empêche l'exécution de scripts et des gestionnaires d'événements tels que: <img src=fake onerror="Prompt(1)"> Testé sur les derniers Chrome, FF, IE (devrait fonctionner à partir d'IE9, mais n'ont pas testé).

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;
    })();

Appelez simplement:

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

L'injection de code HTML non approuvé dans la page est dangereuse, comme expliqué dans la section Comment décoder des entités HTML à l'aide de jQuery? .

Une alternative consiste à utiliser une implémentation JavaScript uniquement du code html_entity_decode (à partir de http://phpjs.org/functions/html_entity_decode:424 ). L'exemple serait alors quelque chose comme:

var varTitle = html_entity_decode("Chris&apos; corner");
9
Diogo Kollross

Une approche plus fonctionnelle de la réponse de 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
  })
}
4
omerts

Je sais que je suis un peu en retard pour le jeu, mais je pensais pouvoir fournir l'extrait de code suivant comme exemple de décodage d'entités HTML à l'aide de jQuery:

var varTitleE = "Chris&apos; corner";
var varTitleD = $("<div/>").html(varTitleE).text();

console.log(varTitleE + " vs. " + varTitleD);​​​​​​​​​​​

N'oubliez pas d'allumer votre inspecteur/firebug pour voir les résultats de la console - ou simplement de remplacer console.log (...) avec alerte (...)

Cela dit, voici ce que ma console via l'inspecteur Google Chrome a lu:

Chris&apos; corner vs. Chris' corner
1
Timothy Petrakis

Parce que @Robert K et @mattcasey ont tous deux un bon code, je pensais que je contribuerais ici avec une version CoffeeScript, au cas où quelqu'un de l'avenir pourrait l'utiliser:

    String::unescape = (strict = false) ->
      ###
      # Take escaped text, and return the unescaped version
      #
      # @param string str | String to be used
      # @param bool strict | Stict mode will remove all HTML
      #
      # Test it here:
      # https://jsfiddle.net/tigerhawkvok/t9pn1dn5/
      #
      # Code: https://Gist.github.com/tigerhawkvok/285b8631ed6ebef4446d
      ###
      # Create a dummy element
      element = document.createElement("div")
      decodeHTMLEntities = (str) ->
        if str? and typeof str is "string"
          unless strict is true
            # escape HTML tags
            str = escape(str).replace(/%26/g,'&').replace(/%23/g,'#').replace(/%3B/g,';')
          else
            str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '')
            str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '')
          element.innerHTML = str
          if element.innerText
            # Do we support innerText?
            str = element.innerText
            element.innerText = ""
          else
            # Firefox
            str = element.textContent
            element.textContent = ""
        unescape(str)
      # Remove encoded or double-encoded tags
      fixHtmlEncodings = (string) ->
        string = string.replace(/\&amp;#/mg, '&#') # The rest, for double-encodings
        string = string.replace(/\&quot;/mg, '"')
        string = string.replace(/\&quote;/mg, '"')
        string = string.replace(/\&#95;/mg, '_')
        string = string.replace(/\&#39;/mg, "'")
        string = string.replace(/\&#34;/mg, '"')
        string = string.replace(/\&#62;/mg, '>')
        string = string.replace(/\&#60;/mg, '<')
        string
      # Run it
      tmp = fixHtmlEncodings(this)
      decodeHTMLEntities(tmp)

Voir https://jsfiddle.net/tigerhawkvok/t9pn1dn5/7/ ou https://Gist.github.com/tigerhawkvok/285b8631ed6ebef4446d (inclut JS compilé, et est probablement mis à jour par rapport à cette réponse)

1
Philip Kahn

Pour le faire en javascript pur sans jQuery ou tout prédéfinir, vous pouvez faire défiler la chaîne html codée à travers les propriétés elements innerHTML et innerText (/ textContent) pour chaque étape de décodage requise:

<html>
  <head>
    <title>For every decode step, cycle through innerHTML and innerText </title>
    <script>
function decode(str) {
  var d = document.createElement("div");
  d.innerHTML = str; 
  return typeof d.innerText !== 'undefined' ? d.innerText : d.textContent;
}
    </script>
  </head>
  <body>
    <script>
var encodedString = "&lt;p&gt;name&lt;/p&gt;&lt;p&gt;&lt;span style=\"font-size:xx-small;\"&gt;ajde&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;em&gt;da&lt;/em&gt;&lt;/p&gt;";
    </script>
    <input type=button onclick="document.body.innerHTML=decode(encodedString)"/>
  </body>
</html>
0
Thijs Dalhuijsen