Puis-je échapper aux caractères spéciaux HTML en JavaScript ?

Question

Je veux afficher du texte en HTML par une fonction JavaScript. Comment puis-je échapper aux caractères spéciaux HTML en JavaScript ? Existe-t-il une API ?

Answer 1

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

Answer 2

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

<input style='width:90%; padding:6px;' placeholder='&lt;b&gt;cool&lt;/b&gt;'>

Answer 3

Vous pouvez utiliser l'outil de jQuery .text() fonction .

Par exemple :

http://jsfiddle.net/9H6Ch/

D'après la documentation de jQuery concernant le .text() fonction :

Il faut savoir que cette méthode échappe la chaîne fournie comme nécessaire pour qu'elle soit rendue correctement en HTML. Pour ce faire, elle appelle la méthode DOM .createTextNode(), mais n'interprète pas la chaîne en tant que HTML.

Les versions précédentes de la documentation de jQuery le formulaient de cette façon ( accentuation ajoutée ) :

Il faut savoir que cette méthode échappe la chaîne fournie comme il se doit afin qu'elle soit rendue correctement en HTML. Pour ce faire, elle appelle la méthode DOM .createTextNode(), qui remplace les caractères spéciaux par leurs équivalents en entité HTML (comme < pour <).

Answer 4

Je pense avoir trouvé la bonne façon de faire...

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

Answer 5

Essayez ceci, en utilisant le prototype.js bibliothèque :

string.escapeHTML();

Essayer une démo