\ u200b (Zero width space) caractères dans mon code JS. D'où viennent-ils?
Je développe actuellement une application Web à l'aide de NetBeans IDE 7.0.1. Récemment, j'ai eu un très mauvais bug, que j'ai finalement corrigé.
Dis que j'ai du code
var element = '<input size="3" id="foo" name="elements[foo][0]" />';
$('#bar').append(element);
J'ai remarqué que quelque chose n'allait pas quand j'ai vu que l'attribut size ne fonctionnait pas dans Chrome (n'a pas été coché dans les autres navigateurs). Lorsque j'ai ouvert cet élément dans Inspector, il a été interprété comme quelque chose comme:
<input id=""3"" name=""elements[foo][0]""
size=""foo"" />
Ce qui était plutôt étrange. Après avoir retapé manuellement la chaîne de caractères element, le bogue avait disparu. Quand j'ai annulé ce changement, j'ai remarqué que Netbeans m'avait alerté sur certains caractères Unicode de mon ancien code. C'était \u200b - un espace de largeur zéro après chaque '=', entre '] [' et à la fin de la chaîne. Donc, la chaîne semblait normale car aucun espace de largeur n'était affiché, mais après m'avoir échappé, ma chaîne était
'<input size=\u200b"3" id=\u200b"foo" name=\u200b"elements[foo]\u200b[0]" />\u200b'
Maintenant, où diable je les ai eues?
Je ne sais pas où j'ai copié le code de element, mais c'est certainement l'un des éléments suivants:
- Autre volet de Netbeans Editor avec un fichier de modèle HTML;
- Inspecteur Google Chrome, action "Copier au format HTML";
- Page de vue source de Google Chrome (très douteux).
Mais je ne peux pas reproduire le bogue avec aucun de cela.
J'utilise Netbeans 7.0.1 et Google Chrome 13.0 sous Windows 7. Aucun commutateur de clavier ni quoi que ce soit du genre ne tourne. De plus, j'utilise Git pour le contrôle de version, mais je n'ai pas extrait ce code, il est donc très peu probable que Git soit à blâmer. Ce ne peut pas être une blague stupide de mes collègues, car ils sont très bien élevés.
Des suggestions qui ont foiré mon code?
Voici un coup de poignard dans le noir.
Mon pari serait sur Google Chrome Inspector. Recherche via la source Chromium, j'ai repéré le bloc de code suivant } _
if (hasText)
attrSpanElement.appendChild(document.createTextNode("=\u200B\""));
if (linkify && (name === "src" || name === "href")) {
var rewrittenHref = WebInspector.resourceURLForRelatedNode(node, value);
value = value.replace(/([\/;:\)\]\}])/g, "$1\u200B");
attrSpanElement.appendChild(linkify(rewrittenHref, value, "webkit-html-attribute-value", node.nodeName().toLowerCase() === "a"));
} else {
value = value.replace(/([\/;:\)\]\}])/g, "$1\u200B");
var attrValueElement = attrSpanElement.createChild("span", "webkit-html-attribute-value");
attrValueElement.textContent = value;
}
Il est fort possible que j'aborde simplement le mauvais arbre ici, mais il semble que des espaces de largeur nulle aient été insérés (pour gérer le retour à la ligne souple?) Lors de l'affichage des attributs. Peut-être que la fonction "Copier en HTML" ne les avait pas correctement supprimés?
Mettre à jour
Après avoir bidouillé l'inspecteur d'élément Chrome, je suis presque convaincu que c'est de là que provient votre \u200b errant. Remarquez comment la ligne peut être renvoyée à la ligne, non seulement au niveau de l’espace visible, mais également après le = ou les caractères correspondants par /([\/;:\)\]\}])/ grâce à l’espace inséré de largeur nulle.
Malheureusement, je ne suis pas en mesure de reproduire votre problème si par inadvertance ils sont inclus dans votre presse-papiers (j'ai utilisé Chrome 13.0.782.112 sur Win XP).
Si vous pouviez reproduire le problème, il serait certainement utile de soumettre un rapport de bogue .
Comme M. Shawn Chin en a déjà parlé. Il m'est arrivé de reproduire le problème alors que je copiais du code jQuery à partir d'une page Web.
Quand cela s'est produit: copie du texte de Google Chrome version 41.0.2272.118 m (non testé avec d'autres navigateurs) vers la fenêtre de code de Dreamweaver. Cette copie des caractères indésirables le long du code comme cela se passe ici
vous avez copié le texte d'une page Web en tant que
$('.btn-pageMenu').css('display','block');
dans les coulisses, c’est ce qui fait que cette ligne
<code><span class="pun">​</span><span class="pln">$</span><span class="pun">(</span><span class="str">'.btn-pageMenu'</span><span class="pun">).</span><span class="pln">css</span><span class="pun">(</span><span class="str">'display'</span><span class="pun">​​​​​​​​​​​​​​​​​​​​​​​​​​​,</span><span class="str">'block'</span><span class="pun">);​​​​​​</span></code>
Copié dans un éditeur avancé tel que ceux que vous avez mentionnés ou Dreamweaver génère des erreurs de navigateur, qui échouent probablement aussi avec du code javascript.
Uncaught SyntaxError: Unexpected token ILLEGAL
Solution: Lorsque cela se produit, adoptez la valeur du bloc-notes jusqu'à ce que les gros joueurs le règlent. C'est plus lié à l'éditeur qu'aux navigateurs.
Après plus de 6 ans, j'obtiens le même problème mais je peux le reproduire.
J'apprends JavaScript à partir de ce blog qui contient des extraits de code. Chaque fois que je copie tout le code d'un extrait et que je le colle dans les éditeurs JavaScript de JS Fiddle ou de JS Bin, des jetons rouges sont répartis dans le code. Voici des captures d'écran du premier extrait de code de l'article de blog ci-dessus dans JS Fiddle et JS Bin . Passez la souris sur l'un de ces jetons rouges pour afficher l'astuce: "\ u200b" (espace largeur nulle ).
Je travaille sur Linux Ubuntu 16.04 et si je colle le code dans l'un de mes éditeurs (Atom 1.22.1 ou Geany 1.32) puis que j'ouvre le fichier dans les navigateurs Web, les erreurs suivantes apparaissent dans la console:
- Chrome 63 -> SyntaxError: jeton non valide ou inattendu
- Firefox 57 -> SyntaxError: caractère illégal
J'espère que cela aidera un peu à préciser pourquoi ces espaces de largeur nulle sont copiés dans le presse-papiers.