Puis-je échapper les caractères spéciaux html en javascript?

Je souhaite afficher un texte en HTML par une fonction javascript. Comment puis-je échapper les caractères spéciaux html dans JS? Existe-t-il une API?

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

Vous pouvez utiliser la .text()fonction de jQuery .

Par exemple:

http://jsfiddle.net/9H6Ch/

De la documentation jQuery concernant la .text()fonction:

Nous devons être conscients que cette méthode échappe à la chaîne fournie si nécessaire pour qu'elle s'affiche correctement en HTML. Pour ce faire, il appelle la méthode DOM .createTextNode (), n'interprète pas la chaîne comme HTML.

Les versions précédentes de la documentation jQuery le formulaient de cette façon (nous soulignons ):

Nous devons être conscients que cette méthode échappe à la chaîne fournie si nécessaire pour qu'elle s'affiche correctement en HTML. Pour ce faire, il appelle la méthode DOM .createTextNode (), qui remplace les caractères spéciaux par leurs équivalents d'entité HTML (tels que & lt; for <).

Je pense que j'ai trouvé la bonne façon de le faire ...

// Create a DOM Text node:
var text_node = document.createTextNode(unescaped_text);

// Get the HTML element where you want to insert the text into:
var elem = document.getElementById('msg_span');

// Optional: clear its old contents
//elem.innerHTML = '';

// Append the text node into it:
elem.appendChild(text_node);

Utiliser lodash

_.escape('fred, barney, & pebbles');
// => 'fred, barney, & pebbles'

code source

C'est, de loin, le moyen le plus rapide que je connaisse. De plus, il fait tout sans ajouter, supprimer ou modifier des éléments sur la page.

function escapeHTML(unsafeText) {
    let div = document.createElement('div');
    div.innerText = unsafeText;
    return div.innerHTML;
}

Il était intéressant de trouver une meilleure solution:

var escapeHTML = function(unsafe) {
  return unsafe.replace(/[&<"']/g, function(m) {
    switch (m) {
      case '&':
        return '&amp;';
      case '<':
        return '&lt;';
      case '"':
        return '&quot;';
      default:
        return '&#039;';
    }
  });
};

Je n'analyse pas >car il ne casse pas le code XML / HTML dans le résultat.

Voici les repères: http://jsperf.com/regexpairs Aussi, j'ai créé une escapefonction universelle : http://jsperf.com/regexpairs2

La façon la plus concise et la plus performante d'afficher du texte non codé est d'utiliser la textContentpropriété.

Plus rapide que l'utilisation innerHTML. Et c'est sans prendre en compte l'échappée des frais généraux.

document.body.textContent = 'a <b> c </b>';

Les éléments DOM prennent en charge la conversion de texte en HTML en l'attribuant à innerText . innerText n'est pas une fonction mais son affectation fonctionne comme si le texte était échappé.

document.querySelectorAll('#id')[0].innerText = 'unsafe " String >><>';

Vous pouvez encoder chaque caractère de votre chaîne:

function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}

Ou ciblez simplement les personnages principaux dont vous devez vous soucier (&, inebreaks, <,>, "et ') comme:

function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}

test.value=encode('How to encode\nonly html tags &<>\'" nice & fast!');

/*************
* \x26 is &ampersand (it has to be first),
* \x0A is newline,
*************/

<textarea id=test rows="9" cols="55">&#119;&#119;&#119;&#46;&#87;&#72;&#65;&#75;&#46;&#99;&#111;&#109;</textarea>

Une doublure (pour ES6 +):

var escapeHtml = s => (s + '').replace(/[&<>"']/g, m => ({
    '&': '&amp;', '<': '&lt;', '>': '&gt;',
    '"': '&quot;', "'": '&#39;'
})[m]);

Pour les anciennes versions:

function escapeHtml(s) {
    return (s + '').replace(/[&<>"']/g, function (m) {
        return ({
            '&': '&amp;', '<': '&lt;', '>': '&gt;',
            '"': '&quot;', "'": '&#39;'
        })[m];
    });
}

Nous avons rencontré ce problème lors de la création d'une structure DOM. Cette question m'a aidé à le résoudre. Je voulais utiliser un double chevron comme séparateur de chemin, mais l'ajout d'un nouveau nœud de texte entraînait directement l'affichage du code de caractère d'échappement, plutôt que le caractère lui-même:

var _div = document.createElement('div');
var _separator = document.createTextNode('»');
//_div.appendChild(_separator); /* this resulted in '»' being displayed */
_div.innerHTML = _separator.textContent; /* this was key */

Si vous utilisez déjà des modules dans votre application, vous pouvez utiliser le module escape-html .

import escapeHtml from 'escape-html';
const unsafeString = '<script>alert("XSS");</script>';
const safeString = escapeHtml(unsafeString);

Essayez ceci en utilisant la prototype.jsbibliothèque:

string.escapeHTML();

Essayez une démo

J'ai trouvé cette solution.

Supposons que nous voulons ajouter du code HTML à l'élément avec des données dangereuses de l'utilisateur ou de la base de données.

var unsafe = 'some unsafe data like <script>alert("oops");</script> here';

var html = '';
html += '<div>';
html += '<p>' + unsafe + '</p>';
html += '</div>';

element.html(html);

Ce n'est pas sûr contre les attaques XSS. Maintenant, ajoutez ceci.

$(document.createElement('div')).html(unsafe).text();

Donc c'est

var unsafe = 'some unsafe data like <script>alert("oops");</script> here';

var html = '';
html += '<div>';
html += '<p>' + $(document.createElement('div')).html(unsafe).text(); + '</p>';
html += '</div>';

element.html(html);

Pour moi, c'est beaucoup plus facile que d'utiliser .replace()et cela supprimera !!! toutes les balises html possibles (j'espère).