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

Question

Je suis en train d'écrire une extension Chrome qui implique de faire beaucoup de travail suivants: désinfection des chaînes de caractères qui peut contenir des balises HTML, en convertissant <, > et & de <, > et &, respectivement.

(En d'autres termes, le même que PHP htmlspecialchars(str, ENT_NOQUOTES) – je ne pense pas qu'il y a un réel besoin de convertir les guillemets doubles.)

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

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

Mais il y a encore un grand décalage quand je dois courir quelques milliers de chaînes par le biais d'un seul coup.

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

(Une idée que j'ai eu était de ne pas déranger le codage du signe "supérieur à", y aurait – il vraiment en danger?)

Answer 1

Voici une façon de procéder:

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

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

Voici une démo.

Answer 2

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 répété de la fonction replace et avec la méthode DOM proposée par Dmitrij.

Ton chemin semble être plus rapide ...

Pourquoi en avez-vous besoin, cependant?

Answer 3

La méthode de Martijn en tant que 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;"
 

Answer 4

Script tout-en-un:

 // HTML entities Encode/Decode

function htmlspecialchars(str) {
    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;');
}
function htmlspecialchars_decode(str) {
    return str.replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&apos;/g, '\'');
}
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/H4m9ZHdn

Answer 5

Vous pouvez utiliser cet outil entifier pour échapper au code HTML afin de le placer en toute sécurité dans une balise:

http://iwantaneff.in/entifier/

Vous avez le code HTML que vous souhaitez placer dans un élément de balise. Vous voulez que ça soit compris, donc ça> joue bien avec votre tag. Cela fait ça.