\ u200b (espace de largeur zéro) caractères dans mon code JS. D’où viennent-ils?

Je développe une interface frontale avec une application Web utilisant NetBeans IDE 7.0.1. Récemment j’ai eu un bug très méchant, que j’ai finalement corrigé.

Dis que j’ai du code

var element = ''; $('#bar').append(element); 

J’ai remarqué que quelque chose qui n’allait pas quand j’ai vu cet atsortingbut de size ne fonctionnait pas dans Chrome (n’a pas été vérifié dans d’autres navigateurs). Lorsque j’ai ouvert cet élément dans Inspector, il a été interprété comme quelque chose comme

  

Ce qui était plutôt étrange. Après avoir ressaisi manuellement la chaîne de caractères caractère-en-caractère, le bogue était parti. Lorsque j’ai annulé ce changement, j’ai remarqué que Netbeans m’avait prévenu de certains caractères Unicode dans 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 est apparue normale car les espaces de largeur zéro ne sont pas affichés, mais après leur avoir échappé, ma chaîne était

 '\u200b' 

Maintenant, où est-ce que je les ai eu?

Je ne sais pas d’où j’ai copié le code de l’ element , mais c’est certainement l’un des suivants:

  • Autre volet de Netbeans Editor avec fichier de modèle HTML;
  • Google Chrome Inspector, action «Copier en HTML»;
  • Page de la source Google Chrome (très douteuse).

Mais je ne peux pas reproduire le bug, ni l’un ni l’autre.

J’utilise Netbeans 7.0.1 et Google Chrome 13.0 sous Windows 7. Aucun commutateur de clavier ou quelque chose comme ça ne fonctionne. J’utilise aussi Git pour le contrôle de version, mais je n’ai pas tiré 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 couteau dans le noir.

Mon pari serait sur Google Chrome Inspector. En parcourant la source Chrome, 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-atsortingbute-value", node.nodeName().toLowerCase() === "a")); } else { value = value.replace(/([\/;:\)\]\}])/g, "$1\u200B"); var attrValueElement = attrSpanElement.createChild("span", "webkit-html-atsortingbute-value"); attrValueElement.textContent = value; } 

Il est tout à fait possible que j’aborde simplement le mauvais arbre ici, mais il semble que des espaces de largeur zéro aient été insérés (pour gérer le retour à la ligne souple?) Lors de l’affichage des atsortingbuts. Peut-être que la fonction “Copier au format HTML” ne les avait pas correctement supprimés?


Mettre à jour

Après avoir manipulé l’inspecteur d’éléments Chrome, je suis presque convaincu que c’est de là que vient votre errance. Remarquez que la ligne peut non seulement recouvrir l’espace visible mais aussi après = ou les caractères correspondant à /([\/;:\)\]\}])/ grâce à l’espace inséré de largeur nulle.

screenshot d'inspecteur de chrome

Malheureusement, je ne parviens pas à reproduire votre problème et à l’inclure par inadvertance dans votre presse-papiers (j’ai utilisé Chrome 13.0.782.112 sous Windows XP).

Il serait certainement intéressant de soumettre un rapport de bogue si vous êtes en mesure de reproduire le comportement.

Comme M. Shawn Chin l’ a déjà abordé. Je viens de reproduire le problème alors que je copiais le code jquery à partir d’une page Web.

Lorsque cela s’est produit: Copie du texte de la version 41.0.2272.118 m de Google Chrome (non testé avec d’autres navigateurs) dans la fenêtre de code de Dreamweaver. Cela copiait les caractères indésirables le long du code comme cela se produit ici

vous avez copié du texte depuis une page Web

 $('.btn-pageMenu').css('display'​​​​​​​​​​​​​​​​​​​​​​​​​​​,'block');​​​​​​ 

dans les coulisses, c’est ce qui rend cette ligne

 $('.btn-pageMenu').css('display'​​​​​​​​​​​​​​​​​​​​​​​​​​​,'block');​​​​​​ 

Copié dans un éditeur avancé comme ceux que vous avez mentionnés ou Dreamweaver donne des erreurs dans le navigateur, probablement en cas d’échec du code JavaScript

 Uncaught SyntaxError: Unexpected token ILLEGAL 

Solution: Lorsque cela se produit, adoptez la valeur du bloc-notes jusqu’à ce qu’elle soit résolue par les plus gros. C’est plus lié à l’éditeur que les navigateurs.

Après plus de 6 ans, je reçois le même problème mais je suis capable de le reproduire.

J’apprends JavaScript depuis 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, je reçois des jetons rouges 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 . En plaçant la souris sur l’un de ces jetons rouges, vous voyez la pointe: “\ u200b” (l’ espace de largeur zéro ).

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) et que j’ouvre le fichier dans les navigateurs Web, j’obtiens les erreurs suivantes dans la console:

  • Chrome 63 -> SyntaxError: jeton non valide ou inattendu
  • Firefox 57 -> SyntaxeError: caractère illégal

J’espère que cela aidera un peu à clarifier pourquoi ces espaces de largeur zéro sont copiés dans le presse-papiers.

Cela devrait le réparer pour vous:

var element = $(''); $('#bar').append(element);

ou vous pouvez le faire de cette façon pour le rendre plus propre:

$('#bar').append($('').attr({ size: '3', id: 'foo', name: 'elements[foo][0]' }));