HtmlSpecialChars équivalent en Javascript?

Il y a un problème avec votre solution de code, il ne fera que s'échapper de 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;");
}

---

Mise à jour

Le code suivant va produire des résultats identiques à ci-dessus, mais elle est plus performante, en particulier sur les gros blocs de texte (merci jbo5112).

function escapeHtml(text) {
  var map = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };

  return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

Intéressant à lire:
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);
  };
})()

Note: n'exécutez cette fois. Et de ne pas l'exécuter sur déjà encodées par exemple & devient &

Voici une fonction pour échapper HTML:

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

Et à 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];});
}

Encore une autre façon de faire cela est de renoncer à tout le mappage de caractères tout à fait et au lieu de convertir tous les caractères indésirables dans leurs références à des caractères numériques, par exemple:

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

Note que les RegEx ne gère que les caractères spécifiques de l'OP voulait s'enfuir, mais, en fonction du contexte qui l'a échappé HTML va être utilisé, ces caractères peuvent ne pas être suffisantes. Ryan Grove article Il n'y a plus de HTML échapper que &, <, >, et " est une bonne lecture sur le sujet. Et en fonction de votre contexte, la RegEx suivante peut très bien être nécessaire afin d'éviter l'injection XSS:

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

Les Chances sont que vous n'avez pas besoin d'une telle fonction. Depuis votre code est déjà dans le navigateur*, vous pouvez accéder au DOM directement au lieu de générer et de codage HTML qui doivent être décodées à l'envers par le navigateur utilisé.

Utilisation innerText propriété pour insérer du texte brut dans les DOM en toute sécurité et beaucoup plus rapide que d'utiliser l'un de l'présenté échapper fonctions. Même plus rapide de l'affectation statique preencoded chaîne de innerHTML.

Utilisation classList pour modifier les classes, dataset pour définir data- attributs et setAttribute pour les autres.

Tous ces va gérer échapper pour vous. Plus précisément, aucun échappement est nécessaire et aucun codage ne sera effectué en-dessous**, puisque vous travaillez autour de HTML, la représentation textuelle de DOM.

JS:

//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);

CSS:

.important { color: red; }

HTML:

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

* Cette réponse n'est pas prévu pour JavaScript côté serveur les utilisateurs (Node.js, etc.)

** Sauf si vous avez explicitement le convertir en HTML par la suite. E. g. en accédant à innerHTML - c'est ce qui arrive 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 le faisant de cette manière que vous allez faire le travail deux fois. Aussi, vous pouvez voir que dans le code HTML obtenu tout n'est pas codé, que le minimum de ce qui est nécessaire pour qu'il soit valable. Il est fait en contexte-dépendante, c'est pourquoi cette méthode jQuery n'est pas de coder des devis et, par conséquent, ne devrait pas être utilisé comme un objectif général de escaper. Les guillemets s'échapper est nécessaire lorsque vous êtes à la construction de HTML comme une chaîne de caractères non approuvées ou citation contenant des données sur la place de la valeur d'un attribut. Si vous utilisez l'API DOM, vous n'avez pas de soins au sujet d'échapper à tout.

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

Inversion:

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

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 son rendement est légèrement pire que la solution à l'aide d'une carte, il a des avantages:

• Ne dépend pas de la bibliothèque ou DOM
• Assez facile à retenir (vous n'avez pas besoin de mémoriser les 5 HTML des caractères d'échappement)
• Peu de code
• Assez rapide (c'est toujours plus rapide que d'5 enchaîné remplacer)