Méthode la plus rapide pour échapper aux balises HTML en tant qu'entités HTML?

J'écris une extension Chrome qui implique une grande partie du travail suivant: nettoyer les chaînes qui peuvent contenir des balises HTML, en convertissant <, >et &en <, >et &, respectivement.

(En d'autres termes, la même chose que PHP htmlspecialchars(str, ENT_NOQUOTES)- je ne pense pas qu'il soit vraiment nécessaire de convertir les caractères entre guillemets.)

C'est la fonction la plus rapide que j'ai trouvée jusqu'à présent:

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

Mais il y a encore un gros décalage lorsque je dois exécuter quelques milliers de cordes en une seule fois.

Quelqu'un peut-il améliorer cela? C'est surtout pour les chaînes de 10 à 150 caractères, si cela fait une différence.

(Une idée que j'avais était de ne pas prendre la peine d'encoder le signe supérieur à - y aurait-il un réel danger avec cela?)

Vous pouvez essayer de passer une fonction de rappel pour effectuer le remplacement:

var tagsToReplace = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;'
};

function replaceTag(tag) {
    return tagsToReplace[tag] || tag;
}

function safe_tags_replace(str) {
    return str.replace(/[&<>]/g, replaceTag);
}

Voici un test de performance: http://jsperf.com/encode-html-entities à comparer avec l'appel de la replacefonction à plusieurs reprises, et en utilisant la méthode DOM proposée par Dmitrij.

Votre chemin semble être plus rapide ...

Pourquoi en avez-vous besoin?

Voici une façon de procéder:

var escape = document.createElement('textarea');
function escapeHTML(html) {
    escape.textContent = html;
    return escape.innerHTML;
}

function unescapeHTML(html) {
    escape.innerHTML = html;
    return escape.textContent;
}

Voici une démo.

La méthode de Martijn comme fonction prototype:

String.prototype.escape = function() {
    var tagsToReplace = {
        '&': '&',
        '<': '&lt;',
        '>': '&gt;'
    };
    return this.replace(/[&<>]/g, function(tag) {
        return tagsToReplace[tag] || tag;
    });
};

var a = "<abc>";
var b = a.escape(); // "&lt;abc&gt;"

Une solution encore plus rapide / plus courte est:

escaped = new Option(html).innerHTML

Ceci est lié à un vestige étrange de JavaScript dans lequel l'élément Option conserve un constructeur qui fait ce genre d'échappatoire automatiquement.

Crédit à https://github.com/jasonmoo/t.js/blob/master/t.js

Le code source AngularJS a également une version à l'intérieur de angular-sanitize.js .

var SURROGATE_PAIR_REGEXP = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
    // Match everything outside of normal chars and " (quote character)
    NON_ALPHANUMERIC_REGEXP = /([^\#-~| |!])/g;
/**
 * Escapes all potentially dangerous characters, so that the
 * resulting string can be safely inserted into attribute or
 * element text.
 * @param value
 * @returns {string} escaped text
 */
function encodeEntities(value) {
  return value.
    replace(/&/g, '&').
    replace(SURROGATE_PAIR_REGEXP, function(value) {
      var hi = value.charCodeAt(0);
      var low = value.charCodeAt(1);
      return '&#' + (((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000) + ';';
    }).
    replace(NON_ALPHANUMERIC_REGEXP, function(value) {
      return '&#' + value.charCodeAt(0) + ';';
    }).
    replace(/</g, '&lt;').
    replace(/>/g, '&gt;');
}

La méthode la plus rapide est:

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

Cette méthode est environ deux fois plus rapide que les méthodes basées sur «replace», voir http://jsperf.com/htmlencoderegex/35 .

Source: https://stackoverflow.com/a/17546215/698168

Script tout-en-un:

// HTML entities Encode/Decode

function htmlspecialchars(str) {
    var map = {
        "&": "&",
        "<": "&lt;",
        ">": "&gt;",
        "\"": "&quot;",
        "'": "&#39;" // ' -> &apos; for XML only
    };
    return str.replace(/[&<>"']/g, function(m) { return map[m]; });
}
function htmlspecialchars_decode(str) {
    var map = {
        "&amp;": "&",
        "&lt;": "<",
        "&gt;": ">",
        "&quot;": "\"",
        "&#39;": "'"
    };
    return str.replace(/(&amp;|&lt;|&gt;|&quot;|&#39;)/g, function(m) { return map[m]; });
}
function htmlentities(str) {
    var textarea = document.createElement("textarea");
    textarea.innerHTML = str;
    return textarea.innerHTML;
}
function htmlentities_decode(str) {
    var textarea = document.createElement("textarea");
    textarea.innerHTML = str;
    return textarea.value;
}

http://pastebin.com/JGCVs0Ts

Je ne suis pas tout à fait sûr de la vitesse, mais si vous recherchez la simplicité, je suggérerais d'utiliser la fonction d' échappement lodash / underscore .

La méthode de Martijn en tant que fonction unique avec gestion de la marque " ( utilisation en javascript ):

function escapeHTML(html) {
    var fn=function(tag) {
        var charsToReplace = {
            '&': '&',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&#34;'
        };
        return charsToReplace[tag] || tag;
    }
    return html.replace(/[&<>"]/g, fn);
}

Je vais ajouter XMLSerializerà la pile. Il fournit le résultat le plus rapide sans utiliser de mise en cache d'objets (ni sur le sérialiseur, ni sur le nœud Texte).

function serializeTextNode(text) {
  return new XMLSerializer().serializeToString(document.createTextNode(text));
}

L'avantage supplémentaire est qu'il prend en charge les attributs qui sont sérialisés différemment des nœuds de texte:

function serializeAttributeValue(value) {
  const attr = document.createAttribute('a');
  attr.value = value;
  return new XMLSerializer().serializeToString(attr);
}

Vous pouvez voir ce qu'il remplace réellement en vérifiant la spécification, à la fois pour les nœuds de texte et pour les valeurs d'attribut . La documentation complète a plus de types de nœuds, mais le concept est le même.

En ce qui concerne les performances, c'est le plus rapide lorsqu'il n'est pas mis en cache. Lorsque vous autorisez la mise en cache, l'appel innerHTMLà un HTMLElement avec un nœud Text enfant est le plus rapide. Regex serait le plus lent (comme le prouvent d'autres commentaires). Bien sûr, XMLSerializer pourrait être plus rapide sur d'autres navigateurs, mais dans mes tests (limités), a innerHTMLest le plus rapide.

Ligne unique la plus rapide:

new XMLSerializer().serializeToString(document.createTextNode(text));

Le plus rapide avec la mise en cache:

const cachedElementParent = document.createElement('div');
const cachedChildTextNode = document.createTextNode('');
cachedElementParent.appendChild(cachedChildTextNode);

function serializeTextNode(text) {
  cachedChildTextNode.nodeValue = text;
  return cachedElementParent.innerHTML;
}

https://jsperf.com/htmlentityencode/1

Un peu tard pour le spectacle, mais quel est le problème avec l'utilisation d' encodeURIComponent () et decodeURIComponent () ?