HtmlSpecialChars équivalent en Javascript?

Apparemment, c'est plus difficile à trouver que je ne le pensais. Et c'est même si simple ...

Existe-t-il une fonction équivalente aux htmlspecialchars de PHP intégrés en Javascript? Je sais qu'il est assez facile de l'implémenter vous-même, mais utiliser une fonction intégrée, si elle est disponible, est tout simplement plus agréable.

Pour ceux qui ne connaissent PHP, htmlspecialchars traduit des choses comme <htmltag/>dans<htmltag/>

Je le sais escape()et encodeURI()ne fonctionne pas de cette façon.

Il y a un problème avec votre code de solution - il n'échappera qu'à la première occurrence de chaque caractère spécial. Par exemple:

escapeHtml('Kip\'s <b>evil</b> "test" code\'s here');
Actual:   Kip&#039;s &lt;b&gt;evil</b> &quot;test" code's here
Expected: Kip&#039;s &lt;b&gt;evil&lt;/b&gt; &quot;test&quot; code&#039;s here

Voici le code qui fonctionne correctement:

function escapeHtml(text) {
  return text
      .replace(/&/g, "&")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
}

Mettre à jour

Le code suivant produira des résultats identiques à ceux ci-dessus, mais il fonctionne mieux, en particulier sur de gros blocs de texte (merci jbo5112 ).

function escapeHtml(text) {
  var map = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };
  
  return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

C'est l'encodage HTML. Il n'y a pas de fonction javascript native pour faire cela, mais vous pouvez google et en obtenir des bien conçues.

Par exemple, http://sanzon.wordpress.com/2008/05/01/neat-little-html-encoding-trick-in-javascript/

EDIT:
C'est ce que j'ai testé:

var div = document.createElement('div');
  var text = document.createTextNode('<htmltag/>');
  div.appendChild(text);
  console.log(div.innerHTML);

Production: <htmltag/>

Vaut le détour: http://bigdingus.com/2007/12/29/html-escaping-in-javascript/

escapeHTML: (function() {
 var MAP = {
   '&': '&',
   '<': '&lt;',
   '>': '&gt;',
   '"': '&#34;',
   "'": '&#39;'
 };
  var repl = function(c) { return MAP[c]; };
  return function(s) {
    return s.replace(/[&<>'"]/g, repl);
  };
})()

Remarque : ne l'exécutez qu'une seule fois. Et ne l'exécutez pas sur des chaînes déjà encodées, par exemple &devient&

Avec jQuery, cela peut être comme ceci:

var escapedValue = $('<div/>').text(value).html();

À partir d'une question connexe Échapper des chaînes HTML avec jQuery

Comme mentionné dans le commentaire, les guillemets doubles et simples sont laissés tels quels pour cette implémentation. Cela signifie que cette solution ne doit pas être utilisée si vous devez créer un attribut d'élément sous la forme d'une chaîne html brute.

Voici une fonction pour échapper au HTML:

function escapeHtml(str)
{
    var map =
    {
        '&': '&',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    return str.replace(/[&<>"']/g, function(m) {return map[m];});
}

Et pour décoder:

function decodeHtml(str)
{
    var map =
    {
        '&': '&',
        '&lt;': '<',
        '&gt;': '>',
        '&quot;': '"',
        '&#039;': "'"
    };
    return str.replace(/&amp;|&lt;|&gt;|&quot;|&#039;/g, function(m) {return map[m];});
}

Underscore.js fournit une fonction pour cela:

_.escape(string)

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

http://underscorejs.org/#escape

Ce n'est pas une fonction Javascript intégrée, mais si vous utilisez déjà Underscore, c'est une meilleure alternative que d'écrire votre propre fonction si vos chaînes à convertir ne sont pas trop volumineuses.

Une autre solution consiste à renoncer complètement à la correspondance des caractères et à convertir à la place tous les caractères indésirables en leurs références de caractères numériques respectives, par exemple:

function escapeHtml(raw) {
    return raw.replace(/[&<>"']/g, function onReplace(match) {
        return '&#' + match.charCodeAt(0) + ';';
    });
}

Notez que le RegEx spécifié ne gère que les caractères spécifiques que l'OP voulait échapper mais, selon le contexte dans lequel le HTML échappé va être utilisé, ces caractères peuvent ne pas être suffisants. L'article de Ryan Grove Il y a plus à échapper HTML que &, <,> et " est une bonne lecture sur le sujet. Et selon votre contexte, le RegEx suivant peut très bien être nécessaire pour éviter l'injection XSS:

var regex = /[&<>"'` !@$%()=+{}[\]]/g

String.prototype.escapeHTML = function() {
        return this.replace(/&/g, "&")
                   .replace(/</g, "&lt;")
                   .replace(/>/g, "&gt;")
                   .replace(/"/g, "&quot;")
                   .replace(/'/g, "&#039;");
    }

échantillon :

var toto = "test<br>";
alert(toto.escapeHTML());

Il y a de fortes chances que vous n'ayez pas besoin d'une telle fonction. Puisque votre code est déjà dans le navigateur *, vous pouvez accéder directement au DOM au lieu de générer et encoder du HTML qui devra être décodé à l'envers par le navigateur pour être réellement utilisé.

Utilisez la innerTextpropriété pour insérer du texte brut dans le DOM en toute sécurité et beaucoup plus rapidement que d'utiliser l'une des fonctions d'échappement présentées. Encore plus rapide que d'attribuer une chaîne préencodée statique à innerHTML.

Utilisez classListpour éditer des classes, datasetpour définir des data-attributs et setAttributepour d'autres.

Tous ces éléments géreront votre fuite. Plus précisément, aucun échappement n'est nécessaire et aucun encodage ne sera effectué sous **, puisque vous travaillez autour du HTML, la représentation textuelle de DOM.

// use existing element
var author = 'John "Superman" Doe <[email protected]>';
var el = document.getElementById('first');
el.dataset.author = author;
el.textContent = 'Author: '+author;

// or create a new element
var a = document.createElement('a');
a.classList.add('important');
a.href = '/search?q=term+"exact"&n=50';
a.textContent = 'Search for "exact" term';
document.body.appendChild(a);

// actual HTML code
console.log(el.outerHTML);
console.log(a.outerHTML);

.important { color: red; }

<div id="first"></div>

* Cette réponse n'est pas destinée aux utilisateurs JavaScript côté serveur (Node.js, etc. )

** Sauf si vous le convertissez explicitement en HTML réel par la suite. Par exemple en accédant innerHTML- c'est ce qui se passe lorsque vous exécutez $('<div/>').text(value).html();suggéré dans d'autres réponses. Donc, si votre objectif final est d'insérer des données dans le document, en procédant de cette façon, vous ferez le travail deux fois. Vous pouvez également voir que dans le HTML résultant, tout n'est pas encodé, seulement le minimum nécessaire pour qu'il soit valide. Cela est fait en fonction du contexte, c'est pourquoi cette méthode jQuery n'encode pas les guillemets et ne doit donc pas être utilisée comme un escaper à usage général. L'échappement des guillemets est nécessaire lorsque vous créez du HTML sous forme de chaîne avec des données non approuvées ou contenant des guillemets à la place de la valeur d'un attribut. Si vous utilisez l'API DOM, vous n'avez pas du tout à vous soucier de vous échapper.

Pour les utilisateurs de Node.JS (ou les utilisateurs utilisant le runtime Jade dans le navigateur), vous pouvez utiliser la fonction d'échappement de Jade.

require('jade').runtime.escape(...);

Cela n'a aucun sens de l'écrire vous-même si quelqu'un d'autre le maintient. :)

Je développe un peu la réponse d'okw.

Vous pouvez utiliser les fonctions DOM du navigateur pour cela.

var utils = {
    dummy: document.createElement('div'),
    escapeHTML: function(s) {
        this.dummy.textContent = s
        return this.dummy.innerHTML
    }
}

utils.escapeHTML('<escapeThis>&')

Cela renvoie <escapeThis>&

Il utilise la fonction standard createElementpour créer un élément invisible, puis utilise la fonction textContentpour définir une chaîne comme son contenu, puis innerHTMLpour obtenir le contenu dans sa représentation HTML.

function htmlspecialchars(str) {
 if (typeof(str) == "string") {
  str = str.replace(/&/g, "&"); /* must do & first */
  str = str.replace(/"/g, """);
  str = str.replace(/'/g, "'");
  str = str.replace(/</g, "&lt;");
  str = str.replace(/>/g, "&gt;");
  }
 return str;
 }

J'espère que cela gagnera la course en raison de ses performances et surtout pas d'une logique chaînée utilisant .replace ('&', '&'). Replace ('<', '<') ...

var mapObj = {
   '&':"&",
   '<':"&lt;",
   '>':"&gt;",
   '"':"&quot;",
   '\'':"&#039;"
};
var re = new RegExp(Object.keys(mapObj).join("|"),"gi");

function escapeHtml(str) 
{   
    return str.replace(re, function(matched)
    {
        return mapObj[matched.toLowerCase()];
    });
}

console.log('<script type="text/javascript">alert('Hello World');</script>');
console.log(escapeHtml('<script type="text/javascript">alert('Hello World');</script>'));

Inversé un:

function decodeHtml(text) {
    return text
        .replace(/&/g, '&')
        .replace(/&lt;/ , '<')
        .replace(/&gt;/, '>')
        .replace(/&quot;/g,'"')
        .replace(/&#039;/g,"'");
}

OWASP recommande que "[e] xscepté pour les caractères alphanumériques, [vous devriez] échapper tous les caractères avec des valeurs ASCII inférieures à 256 avec le &#xHH;format (ou une entité nommée si disponible) pour empêcher le changement de [un] attribut."

Voici donc une fonction qui fait cela, avec un exemple d'utilisation:

function escapeHTML(unsafe) {
  return unsafe.replace(
    /[\u0000-\u002F]|[\u003A-\u0040]|[\u005B-\u00FF]/g,
    c => '&#' + ('000' + c.charCodeAt(0)).substr(-4, 4) + ';'
  )
}
document.querySelector('div').innerHTML =
  '<span class=' +
  escapeHTML('this should break it! " | / % * + , - / ; < = > ^') +
  '>' +
  escapeHTML('<script>alert("inspect the attributes")\u003C/script>') +
  '</span>'

<div></div>

function htmlEscape(str){
    return str.replace(/[&<>'"]/g,x=>'&#'+x.charCodeAt(0)+';')
}

Cette solution utilise le code numérique des caractères, par exemple <est remplacé par< .

Bien que ses performances soient légèrement inférieures à celles de la solution utilisant une carte , elle présente les avantages:

• Ne dépend pas d'une bibliothèque ou d'un DOM
• Assez facile à retenir (vous n'avez pas besoin de mémoriser les 5 caractères d'échappement HTML)
• Petit code
• Raisonnablement rapide (c'est toujours plus rapide que 5 remplacements enchaînés)