Les guillemets en Javascript (et en HTML, et en PHP)
Par Bruno le lundi 28 décembre 2009, 08:39 - L'informatique - Lien permanent
Il
s'agit là d'un sujet qui revient souvent pour qui programme des pages web (donc
(au moins finalement un jour) en HTML) dynamiques (i.e. avec du Javascript
dedans) engendrées par du PHP : comment ne pas se mélanger les guillemets ? Ce
sujet a de multiples facettes, du passage de valeurs dans les formulaires ou
les URLs jusqu'à l'insertion sûre de chaînes fournies par l'utilisateur, sans
parler des bases de données. Je n'aborderai ici qu'une petite facette, mais du
genre épine dans le pied : la cohabitation des guillemets entre HTML,
Javascript et PHP.
Un peu de vocabulaire
J'appelle apostrophe
le caractère '. C'est celui qu'on trouve entre le
l et le a dans l'arbre. En anglais on
l'appelle apostrophe ou single quote.
J'appelle guillement
le caractère ". C'est celui qui entoure coucou
dans "coucou". En anglais on l'appelle double quote ou
juste quote.
J'appelle contre-oblique
le caractère \. En anglais on l'appelle
backslash.
Enfin, j'appelle banaliser
le mécanisme consistant à ôter à
un caractère son rôle spécial dans le texte d'un programme. En anglais on dit
to escape.
Les chaînes en Javascript
Les chaînes de caractères en Javascript sont délimitées par des apostrophes ou des guillemets. On les banalise par une contre-oblique. Ce qui fait que les chaînes suivantes sont des chaînes Javascript valides :
'Il était une fois' "Dans la ville de Foix" 'Elle se dit "Ma foi !"...' "...C'est la dernière fois" "Elle se dit \"Ma foi !\"..." '...C\'est la dernière fois' "Elle se dit" + ' "Ma foi !"...' + "...C'est la dernière fois"
Une chaîne Javascript dans du PHP
Les chaînes PHP sont délimitées par des guillemets, qui peuvent être banalisés par des contre-obliques. On peut donc y insérer des chaînes Javascript en banalisant les guillemets et les contre-obliques. Comme dans :
echo "alert(\"Bonjour !\")";
echo "alert('C\\'est moi.')";
Une chaîne Javascript dans un attribut HTML
Les attributs HTML sont délimités par des guillemets, qui ne peuvent pas
être escapés. En revanche, on peut y insérer des guillemets en les
écrivant ". Comme dans :
<input type="button" value="Cliquer ici" onclick="alert('Coucou.')"/>
<input type="button" value="Cliquer ici" onclick="alert('C\\'est moi.')"/>
<input type="button" value="Cliquer ici" onclick="alert('Et je dis : "Bonjour !".')"/>
Une chaîne Javascript dans un attribut HTML depuis du PHP
Il « suffit » de cumuler ce qui précède :
echo "<input type="button" value="Cliquer ici" onclick=\"alert('Coucou.')\"/>";
echo "<input type="button" value="Cliquer ici" onclick=\"alert('C\\\\'est moi..')\"/>";
echo "<input type="button" value="Cliquer ici" onclick=\"alert('Et je dis : "Bonjour !"..')\"/>";