Codage HTML en JavaScript/jQuery

Question

Je suis à l'aide de JavaScript pour extraire une valeur d'un champ caché et l'afficher dans une textbox. La valeur du champ caché est codé.

Par exemple,

<input id='hiddenId' type='hidden' value='chalk &amp; cheese' />

tire dans

<input type='text' value='chalk &amp; cheese' />

par le biais de certains de jQuery pour obtenir la valeur du champ caché (c'est à ce moment que je perds de l'encodage):

$('#hiddenId').attr('value')

Le problème est que lorsque j'ai lu chalk & cheese du champ caché, JavaScript semble perdre de l'encodage. Pour échapper " et ', je veux le codage de rester.

Est-il une bibliothèque JavaScript ou jQuery méthode HTML-encoder une chaîne de caractères?

Answer 1

J’utilise ces fonctions :

Fondamentalement un élément div est créé à la mémoire, mais il n’est jamais ajouté au document.

La fonction htmlEncode j’ai mis l’innerText de l’élément et récupérer l’innerHTML codé, sur la fonction htmlDecode, j’ai mis la valeur innerHTML de l’élément et l’innerText est récupéré.

Consultez un exemple de cours ici.

Answer 2

Le jQuery, le truc de ne pas encoder les guillemets et dans IE it bande de vos espaces.

Basé sur l' évasion templatetag dans Django, qui je pense est largement utilisé/testé déjà, j'ai fait une fonction qui fait ce qui est nécessaire.

C'est sans doute plus simple (et peut-être plus rapidement) que l'une des solutions pour les espaces de décapage de problème - et il encode les guillemets, ce qui est essentiel si vous allez utiliser le résultat à l'intérieur de la valeur d'un attribut par exemple.

function htmlEscape(str) {
    return String(str)
            .replace(/&/g, '&')
            .replace(/"/g, '"')
            .replace(/'/g, ''')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
}

Mise à jour 2013-06-17:
Dans la recherche de la manière la plus rapide s'échapper, j'ai trouvé cette mise en œuvre d'un replaceAll méthode:
http://dumpsite.com/forum/index.php?topic=4.msg29#msg29
(également référencé ici: la méthode la plus Rapide pour remplacer toutes les occurrences d'un caractère dans une chaîne de caractères)
Certains des résultats de performance ici:
http://jsperf.com/htmlencoderegex/25

Il donne identiques chaîne de résultat pour le groupe builtin replace chaînes ci-dessus. Je serais très heureux si quelqu'un pouvait expliquer pourquoi c'est plus rapide!?

Answer 3

Voici un non-jQuery version qui est beaucoup plus rapide que celle de l'jQuery .html() de la version et de l' .replace() version. Cela préserve tous les espaces, mais comme la version jQuery, ne gère pas les guillemets.

function htmlEncode( html ) {
    return document.createElement( 'a' ).appendChild( 
        document.createTextNode( html ) ).parentNode.innerHTML;
};

Vitesse: http://jsperf.com/htmlencoderegex/17

Démo:

Sortie:

Script:

function htmlEncode( html ) {
    return document.createElement( 'a' ).appendChild( 
        document.createTextNode( html ) ).parentNode.innerHTML;
};

function htmlDecode( html ) {
    var a = document.createElement( 'a' ); a.innerHTML = html;
    return a.textContent;
};

document.getElementById( 'text' ).value = htmlEncode( document.getElementById( 'hidden' ).value );

//sanity check
var html = '<div>   &amp; hello</div>';
document.getElementById( 'same' ).textContent = 
      'html === htmlDecode( htmlEncode( html ) ): ' 
    + ( html === htmlDecode( htmlEncode( html ) ) );

HTML:

<input id="hidden" type="hidden" value="chalk    &amp; cheese" />
<input id="text" value="" />
<div id="same"></div>

Answer 4

Je sais il s’agit d’un vieux, mais je voulais poster une variation de la réponse acceptée qui fonctionnera dans Internet Explorer sans supprimer les lignes. Cela devrait vraiment être un commentaire sur cette réponse, mais je ne suis pas autorisé à commenter encore. Si elle est ici :

Answer 5

Bonne réponse. Notez que si la valeur à encoder est ou avec jQuery 1.4.2 vous pourriez obtenir des erreurs telles que :

``

OU

``

La solution consiste à modifier la fonction pour rechercher une valeur réelle :