Comment puis-je échapper à certains html en javascript ?

Question

Compte tenu du texte

<b>This is some text</b>

Je veux l'écrire sur ma page pour qu'elle apparaisse comme ceci :

<b>This is some text</b>

et pas comme ça

Voici du texte

en utilisant escape("<b>This is some text</b>") me donne ce joli bijou dans firefox

%3Cb%3EThis%20is%20some%20text%3C/b%3E

pas exactement ce que je cherche. Vous avez des idées ?

Answer 1

Cela devrait fonctionner pour vous : http://blog.nickburwell.com/2011/02/escape-html-tags-in-javascript.html

function escapeHTML( string )
{
    var pre = document.createElement('pre');
    var text = document.createTextNode( string );
    pre.appendChild(text);
    return pre.innerHTML;
}

Avertissement de sécurité

La fonction n'échappe pas les guillemets simples et doubles, ce qui, s'il est utilisé dans un mauvais contexte, peut encore conduire à un XSS. Par exemple :

 var userWebsite = '" onmouseover="alert(\'gotcha\')" "';
 var profileLink = '<a href="' + escapeHtml(userWebsite) + '">Bob</a>';
 var div = document.getElemenetById('target');
 div.innerHtml = profileLink;
 // <a href="" onmouseover="alert('gotcha')" "">Bob</a>

Merci à tampon pour avoir signalé ce cas. Extrait de cet article de blog .

Answer 2

J'aime la réponse de @limc pour les situations où le document HTML DOM est disponible.

J'aime les réponses de @Michele Bosi et @Paolo pour les environnements de documents DOM non HTML tels que Node.js.

La réponse de @Michael Bosi peut être optimisée en supprimant la nécessité d'appeler replace 4 fois avec une seule invocation de replace combinée avec une fonction replacer intelligente :

function escape(s) {
    let lookup = {
        '&': "&",
        '"': """,
        '\'': "'",
        '<': "&lt;",
        '>': "&gt;"
    };
    return s.replace( /[&"'<>]/g, c => lookup[c] );
}
console.log(escape("<b>This is 'some' text.</b>"));

Le test de portée de @Paolo peut être optimisé avec une regex bien choisie et la boucle for peut être éliminée en utilisant une fonction replacer :

function escape(s) {
    return s.replace(
        /[^0-9A-Za-z ]/g,
        c => "&#" + c.charCodeAt(0) + ";"
    );
}
console.log(escape("<b>This is 'some' text</b>"));

Comme l'a indiqué @Paolo, cette stratégie fonctionnera pour un plus grand nombre de scénarios.

Answer 3

J'ai fini par faire ça :

function escapeHTML(s) { 
    return s.replace(/&/g, '&')
            .replace(/"/g, '"')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
}

Answer 4

Essayez ceci htmlentities pour javascript

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

Answer 5

L'évasion traditionnelle

Si vous utilisez le langage XHTML, vous devrez utiliser une balise CDATA section. Vous pouvez également les utiliser en HTML, mais celui-ci n'est pas aussi strict.

J'ai séparé les constantes de chaîne pour que ce code puisse fonctionner en ligne sur le XHTML dans les blocs CDATA. Si vous fournissez votre JavaScript sous forme de fichiers séparés, vous n'avez pas besoin de vous soucier de cela. Notez que si vous sont en utilisant XHTML avec JavaScript en ligne, alors vous besoin de d'enfermer votre code dans un bloc CDATA, sinon une partie de ce programme ne fonctionnera pas. Vous rencontrerez des erreurs étranges et subtiles.

function htmlentities(text) {
    var escaped = text.replace(/\]\]>/g, ']]' + '>]]&gt;<' + '![CDATA[');
    return '<' + '![CDATA[' + escaped + ']]' + '>';
}

Nœud de texte DOM

La façon "correcte" d'échapper du texte est d'utiliser la fonction DOM document.createTextNode . Cela n'échappe pas réellement le texte ; cela indique simplement au navigateur de créer un élément texte, qui n'est pas analysé par nature. Vous devez cependant être prêt à utiliser le DOM pour que cette méthode fonctionne : c'est-à-dire que vous devez utiliser des méthodes telles que appendChild par opposition à la innerHTML et autres. Cela permettrait de remplir un élément avec l'ID an-element avec du texte, qui ne serait pas analysé comme du (X)HTML :

var textNode = document.createTextNode("<strong>This won't be bold.  The tags " +
    "will be visible.</strong>");
document.getElementById('an-element').appendChild(textNode);

jQuery DOM Wrapper

jQuery fournit un wrapper pratique pour createTextNode nommé text . C'est assez pratique. Voici la même fonctionnalité en utilisant jQuery :

$('#an-element').text("<strong>This won't be bold.  The tags will be " +
    "visible.</strong>");