Posso evitare caratteri speciali html in javascript?

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

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

Puoi usare la .text()funzione di jQuery .

Per esempio:

http://jsfiddle.net/9H6Ch/

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

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

Le versioni precedenti della documentazione jQuery erano formulate in questo modo ( enfasi aggiunta ):

Dobbiamo essere consapevoli che questo metodo sfugge alla stringa fornita come necessario in modo che venga visualizzato correttamente in HTML. Per fare ciò, chiama il metodo DOM .createTextNode (), che sostituisce i caratteri speciali con i loro equivalenti di entità HTML (come & lt; per <).

Penso di aver trovato il modo giusto di 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 lodash

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

codice sorgente

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

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

È stato interessante trovare una soluzione migliore:

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

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

Ecco i parametri di riferimento: http://jsperf.com/regexpairs Inoltre, ho creato una escapefunzione universale : http://jsperf.com/regexpairs2

Il modo più conciso e performante per visualizzare testo non codificato è usare la textContentproprietà.

Più veloce dell'uso innerHTML. E questo senza tener conto dell'evasione delle spese generali.

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

DOM Elements supporta la conversione di testo in HTML assegnando a innerText . innerText non è una funzione ma l'assegnazione ad essa funziona come se il testo fosse evaso.

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

Puoi codificare tutti i caratteri 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,
*************/

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

Un one-liner (per ES6 +):

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

Per le versioni precedenti:

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

Ho riscontrato questo problema durante la creazione di una struttura DOM. Questa domanda mi ha aiutato a risolverlo. Volevo usare un doppio chevron come separatore di percorso, ma l'aggiunta di un nuovo nodo di testo ha portato direttamente alla visualizzazione del codice carattere sfuggito, piuttosto che al carattere stesso:

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

Se usi già moduli nella tua app, puoi usare il modulo escape-html .

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

Prova questo, usando la prototype.jslibreria:

string.escapeHTML();

Prova una demo

Ho trovato questa soluzione.

Supponiamo di voler aggiungere dell'html all'elemento con dati non sicuri dell'utente o del database.

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

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

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 <script>alert("oops");</script> here';

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

element.html(html);

Per me questo è molto più semplice dell'uso .replace()e lo rimuoverà !!! tutti i possibili tag html (spero).