Décodage des entités HTML

Question

Comment coder et décoder des entités HTML en utilisant JavaScript ou JQuery ?

var varTitle = "Chris' corner";

Je veux que ça le soit :

var varTitle = "Chris' corner";

Answer 1

Je vous 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 entraîne la création d'éléments tels que des scripts et des éléments HTML. C'est beaucoup plus de code que ce dont nous avons besoin. Je suggère plutôt 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, il suffit d'appeler decodeEntities("&") et il utilisera les mêmes techniques sous-jacentes que la version jQuery, mais sans la surcharge de jQuery, et après avoir nettoyé les balises HTML dans l'entrée. Voir Commentaire de Mike Samuel sur la réponse acceptée pour savoir comment filtrer les balises HTML.

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

jQuery.decodeEntities = decodeEntities;

Answer 2

Vous pourriez 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 .

Answer 3

Comme l'a dit Robert K, n'utilisez pas jQuery.html().text() pour décoder les entités html, car cela n'est pas sûr, l'entrée utilisateur ne devant jamais avoir accès au DOM. Lire à ce sujet XSS pour expliquer pourquoi ce n'est pas sûr.

Essayez plutôt le Underscore.js la bibliothèque de courroies utilitaires qui est fournie avec s'échapper y s'évader méthodes :

_.escape(string)

Échappe une chaîne de caractères pour l'insérer dans le HTML, en remplaçant & , < , > , " , ` y ' des personnages.

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

_.unescape(string)

Le contraire de l'évasion, remplace & , < , > , " , ` y ' avec leurs équivalents non encodés.

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

Pour prendre en charge le décodage d'un plus grand nombre de caractères, il suffit de copier l'Underscore s'évader et ajouter d'autres personnages à la carte.

Answer 4

Voici une méthode rapide qui ne nécessite pas la création d'un div et qui décode les caractères échappés 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;
}

Answer 5

Inspirée de la solution de Robert K, cette version ne supprime pas les balises HTML et est tout aussi sûre.

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