Posso sfuggire i caratteri speciali html in javascript?

Voglio visualizzare un testo in HTML con una funzione javascript. Come posso sfuggire ai caratteri speciali html in JS? C’è un’API?

function escapeHtml(unsafe) { return unsafe .replace(/&/g, "&") .replace(//g, ">") .replace(/"/g, """) .replace(/'/g, "'"); } 

Puoi usare la funzione .text() di jQuery.

Per esempio:

http://jsfiddle.net/9H6Ch/

Dalla documentazione di jQuery relativa alla funzione .text() :

Dobbiamo essere consapevoli del fatto che questo metodo sfugge alla stringa fornita come necessario in modo che venga visualizzata correttamente in HTML. Per fare ciò, chiama il metodo DOM .createTextNode (), non interpreta la stringa come HTML.

Versioni precedenti della documentazione jQuery lo hanno formulato in questo modo ( corsivo aggiunto ):

Dobbiamo essere consapevoli del fatto che questo metodo sfugge alla stringa fornita come necessario in modo che venga visualizzata correttamente in HTML. Per farlo, chiama il metodo DOM .createTextNode (), che sostituisce i caratteri speciali con i loro equivalenti di entity framework HTML (come & lt; per <).

 function escapeHtml(html){ var text = document.createTextNode(html); var p = document.createElement('p'); p.appendChild(text); return p.innerHTML; } // Escape while typing & print result document.querySelector('input').addEventListener('input', e => { console.clear(); console.log( escapeHtml(e.target.value) ); }); 
  

Penso di aver trovato il modo giusto per farlo …

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

Usando il lodash

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

codice sorgente

È stato interessante trovare una soluzione migliore:

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

Non analizzo > perché non infrange il codice XML / HTML nel risultato.

Ecco i benchmark: http://jsperf.com/regexpairs Inoltre, ho creato una funzione di escape universale: http://jsperf.com/regexpairs2

Elementi DOM supportano la conversione del testo in HTML assegnando a innerText . innerText non è una funzione ma assegnandole funziona come se il testo fosse sfuggito.

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

Il modo più conciso e performante per visualizzare il testo non codificato consiste nell’utilizzare la proprietà textContent .

Più veloce dell’utilizzo di innerHTML . E questo senza tener conto delle spese generali.

 document.body.textContent = 'a  c '; 

Puoi codificare ogni carattere nella tua stringa:

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

Oppure scegli come target i personaggi principali di cui preoccuparti (&, inebreaks, <,>, “e”) come:

 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, *************/ 
  

Questo è di gran lunga il modo più veloce in cui l’ho visto. Inoltre, lo fa tutto senza aggiungere, rimuovere o modificare elementi sulla pagina.

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

Prova questo, usando la libreria prototype.js :

 string.escapeHTML(); 

Prova una demo

Ho trovato questa soluzione.

Supponiamo di voler aggiungere qualche elemento HTML all’elemento con dati non sicuri dall’utente o dal database.

 var unsafe = 'some unsafe data like  here'; var html = ''; html += '
'; html += '

' + unsafe + '

'; html += '
'; element.html(html);

Non è sicuro contro gli attacchi XSS. Ora aggiungi questo.

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

Così è

 var unsafe = 'some unsafe data like  here'; var html = ''; html += '
'; html += '

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

'; html += '
'; element.html(html);

Per me è molto più facile che usare .replace() e rimuoverà !!! tutti i possibili tag html (spero).