HtmlSpecialChars equivalente in Javascript?

Apparentemente, questo è più difficile da trovare di quanto pensassi. Ed è anche così semplice ...

Esiste una funzione equivalente a htmlspecialchars di PHP integrata in Javascript? So che è abbastanza facile implementarlo da soli, ma l'uso di una funzione integrata, se disponibile, è semplicemente più bello.

Per chi non conosce PHP, htmlspecialchars traduce roba come <htmltag/>in<htmltag/>

Lo so escape()e encodeURI()non funziona così.

Si è verificato un problema con il codice della soluzione: sfuggirà solo alla prima occorrenza di ciascun carattere speciale. Per esempio:

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

Ecco il codice che funziona correttamente:

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

Aggiornare

Il codice seguente produrrà risultati identici a quanto sopra, ma funziona meglio, in particolare su grandi blocchi di testo (grazie a jbo5112 ).

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

Questa è la codifica HTML. Non esiste una funzione javascript nativa per farlo, ma puoi google e ottenerne alcuni ben fatti.

Ad esempio http://sanzon.wordpress.com/2008/05/01/neat-little-html-encoding-trick-in-javascript/

EDIT:
Questo è quello che ho testato:

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

Produzione: <htmltag/>

Merita una lettura: 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);
  };
})()

Nota : eseguirlo una sola volta. E non eseguirlo su stringhe già codificate, ad esempio &diventa&

Con jQuery può essere così:

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

Dalla domanda correlata Escaping delle stringhe HTML con jQuery

Come menzionato nel commento, le virgolette doppie e le virgolette singole vengono lasciate così come sono per questa implementazione. Ciò significa che questa soluzione non deve essere utilizzata se è necessario creare l'attributo element come stringa HTML non elaborata.

Ecco una funzione per sfuggire all'HTML:

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

E per decodificare:

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 fornisce una funzione per questo:

_.escape(string)

Esce da una stringa per l'inserimento in HTML, sostituendo i caratteri &, <,>, "e '.

http://underscorejs.org/#escape

Non è una funzione Javascript integrata, ma se stai già utilizzando Underscore è un'alternativa migliore rispetto alla scrittura della tua funzione se le stringhe da convertire non sono troppo grandi.

Un altro punto a riguardo è quello di rinunciare del tutto alla mappatura dei caratteri e di convertire invece tutti i caratteri indesiderati nei rispettivi riferimenti numerici, ad esempio:

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

Si noti che il RegEx specificato gestisce solo i caratteri specifici che l'OP ha voluto sfuggire ma, a seconda del contesto in cui verrà utilizzato l'HTML di escape, questi caratteri potrebbero non essere sufficienti. L'articolo di Ryan Grove C'è molto di più nell'escaping HTML rispetto a &, <,>, e " è una buona lettura sull'argomento. E a seconda del contesto, potrebbe essere necessario il seguente RegEx per evitare l'iniezione XSS:

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

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

campione :

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

È probabile che non ti serva una tale funzione. Poiché il tuo codice è già nel browser *, puoi accedere direttamente al DOM invece di generare e codificare HTML che dovrà essere decodificato all'indietro dal browser per essere effettivamente utilizzato.

Utilizzare la innerTextproprietà per inserire il testo normale nel DOM in modo sicuro e molto più veloce rispetto all'utilizzo di una qualsiasi delle funzioni di escape presentate. Ancora più veloce dell'assegnazione di una stringa pre-codificata statica a innerHTML.

Utilizzare classListper modificare le classi, datasetper impostare data-attributi e setAttributeper gli altri.

Tutti questi gestiranno la fuga per te. Più precisamente, non è necessario alcun escape e nessuna codifica verrà eseguita al di sotto di **, poiché si sta lavorando su HTML, la rappresentazione testuale di DOM.

// use existing element
var author = 'John "Superman" Doe <john@example.com>';
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>

* Questa risposta non è destinata agli utenti JavaScript lato server (Node.js, ecc. )

** A meno che non lo si converta esplicitamente in HTML effettivo in seguito. Ad esempio accedendo innerHTML: questo è ciò che accade quando esegui $('<div/>').text(value).html();suggerimenti in altre risposte. Quindi, se il tuo obiettivo finale è quello di inserire alcuni dati nel documento, facendolo in questo modo farai il lavoro due volte. Inoltre puoi vedere che nel codice HTML risultante non tutto è codificato, ma solo il minimo necessario per essere valido. Viene fatto in base al contesto, ecco perché questo metodo jQuery non codifica le virgolette e quindi non dovrebbe essere usato come un escaper generico. L'escape delle virgolette è necessaria quando si costruisce HTML come stringa con dati non attendibili o contenenti virgolette al posto del valore di un attributo. Se usi l'API DOM, non devi preoccuparti di scappare affatto.

Per gli utenti Node.JS (o gli utenti che utilizzano il runtime Jade nel browser), è possibile utilizzare la funzione di escape di Jade.

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

Non ha senso scriverlo tu stesso se qualcun altro lo sta mantenendo. :)

Sto elaborando un po 'la risposta di okw.

È possibile utilizzare le funzioni DOM del browser per questo.

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

utils.escapeHTML('<escapeThis>&')

Questo ritorna <escapeThis>&

Utilizza la funzione standard createElementper creare un elemento invisibile, quindi utilizza la funzione textContentper impostare qualsiasi stringa come contenuto e quindi innerHTMLper ottenere il contenuto nella sua rappresentazione 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;
 }

Spero che questo vinca la gara a causa delle sue prestazioni e, soprattutto, non di una logica incatenata che utilizza .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>'));

Uno invertito:

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

OWASP consiglia che "[e] xcept per i caratteri alfanumerici, [dovresti] sfuggire a tutti i caratteri con valori ASCII inferiori a 256 con il&#xHH; formato (o un'entità denominata se disponibile) per impedire il passaggio da [un] attributo".

Quindi ecco una funzione che lo fa, con un esempio di utilizzo:

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)+';')
}

Questa soluzione utilizza ad esempio il codice numerico dei caratteri < viene sostituito da< .

Sebbene le sue prestazioni siano leggermente peggiori rispetto alla soluzione che utilizza una mappa , presenta i vantaggi:

• Non dipende da una libreria o DOM
• Abbastanza facile da ricordare (non è necessario memorizzare i 5 caratteri di escape HTML)
• Piccolo codice
• Abbastanza veloce (è ancora più veloce di 5 concatenati)