Sanitiser une chaine en javascript

Bonjour,

Je veux aujourd’hui partager une soluton simple à un problème qui se posait à moi assez souvent.

Comment afficher une chaine en javascript dans un élément html ?

C’est simple, vous me direz :

<div id="cible">
</div>
<script>
   String maChaine='Salut tout le monde !';
   cible = document.getElementById('cible');
   cible.innerHTML = maChaine;
</script>

Ca marche dans certains cas, mais si j’ai :

<div id="cible">
</div>
<script>
   String maChaine='Salut <i>tout</i> le monde !';
   cible = document.getElementById('cible');
   cible.innerHTML = maChaine;
</script>

On a :

« Salut tout le monde ! »

Et ce n’est pas une fonctionnalité trop cool.

J’aimerais avoir :

« Salut <i>tout</i> le monde ! »

Et oui, il faut échapper la chaine pour afficher toute la chaine sans rien interpréter. C’est ce que les « vrais » veulent.

Les vrais quoi ? Les vrais programmeurs, les pros quoi ! Adhérez à cette idée si vous ne voulez pas passer pour un amateur.

Alors, comment on fait ?

On peut installer une librairie qui fait ça, et on va ajouter du bloat à une application qui n’en a vraiement pas besoin.

On peut aussi le faire tout seul, ça prend 5min et ça durera pour toujours, ou jusqu’à ce que javascript propose un équivalent.

On va ajouter une méthode à String qu’on appellera toText()

String.prototype.toText = function (){return this.replace('&', '&amp;').replace('<', '&lt;').replace('>', '&gt;').replace('"', '&quot;');}

On utilisera toText() à chaque fois qu’on veut écrire notre chaine.

cible.innerHTML = maChaine.toText();

Le tour est joué.

J’ai échappé le strict minimum, soit 4 caractères. Libre à chacun d’en ajouter.