\u200b (Zero width space) des caractères dans mon code JS. D'où venaient-ils?

Je suis en train d'élaborer un front-end d'une application web à l'aide de NetBeans IDE 7.0.1. Récemment, j'ai eu un très vilain bug, que j'ai enfin résolu.

Dire que j'ai le code

var element = '<input size="3" id="foo" name="elements[foo][0]" />';
$('#bar').append(element);

J'ai remarqué que quelque chose est mal passé quand j'ai vu que size attribut ne fonctionne pas sous Chrome (n'a pas vérifié dans d'autres navigateurs). Quand j'ai ouvert cet élément dans l'Inspecteur, il a été interprété comme quelque chose comme

<input id="&quot;3&quot;" name="&quot;elements[foo][0]&quot;" 
    size="&quot;foo&quot;" />

Ce qui était plutôt étrange. Après retaper manuellement le element chaîne de caractère en caractère, le bug a disparu. Quand je annuler ed ce changement que j'ai remarqué que Netbeans m'a alerté sur certains caractères Unicode dans mon ancien code. Il a été \u200b - une largeur nulle espaces après chaque '=', entre '][' et à la fin de la chaîne. Ainsi, la chaîne semble normal car zéro espaces de largeur n'est pas affichée, mais après avoir échappé à ma chaîne a été

'<input size=\u200b"3" id=\u200b"foo" name=\u200b"elements[foo]\u200b[0]" />\u200b'

Maintenant où diable ai-je les obtenir?

Je ne sais pas où j'ai copié le code de element partir, mais c'est certainement l'une des opérations suivantes:

Autre volet de Netbeans de l'Éditeur de fichier modèle HTML;
Google Chrome Inspecteur, "Copier en tant que HTML' action;
Google Chrome vue de source de la page (très hésitant).

Mais je ne peux pas reproduire le bug avec le ni de.

J'utilise Netbeans 7.0.1 et Google Chrome 13.0 sous Windows 7. Pas de clavier les commutateurs ou quelque chose comme il est en cours d'exécution. Je suis aussi à l'aide de Git pour le contrôle de version, mais je n'ai pas tiré de ce code, ainsi il est très peu probable que Git est à blâmer. Il ne peut pas être une stupide blague de mes collègues, parce qu'ils sont très bien élevés.

Des suggestions qui a foiré mon code?

Effrayant. J'espère vous retrouver.
Merci, @RichieHindle. J'ai donné sur le suivi par ma propre, j'espère que la communauté vous aidera. Après tout ce n'est pas effrayant après je sais comment le résoudre (analyse des sources de "\u200b" apparences). Mais je suis curieux de savoir d'où cela provenait.
est votre deuxième ligne de code l'appel de jQuery? Si oui, Pouvez-vous essayer de "alerte" le contenu de l'élément var à l'aide de escape() et/ou encode() avant de l'utiliser plus; pouvez-vous essayer de ré-encoder vos append contournant jQuery (utiliser getElementsByTagName(), append()) pour clairement falsifier jQuery comme la source de tous les maux?
si jQuery, vous conseille version .... peut-être quelqu'un qui essaie de reproduire le problème est d'utiliser une version différente
c'est jQuery 1.4.2, mais il n'a rien à voir avec le bug, parce que ceux de Longueur Zéro Espaces a été collé dans mon code, qui n'est pas généré par le script. Ce que j'essaie de savoir comment j'ai réussi à copier à l'endroit.

InformationsquelleAutor Hnatt | 2011-08-14

46

Voici un coup de poignard dans le noir.

Mon pari serait sur Google Chrome Inspecteur. La recherche par le biais de la source de 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-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;
    }
```
C'est tout à fait possible que je suis tout simplement aboiements le mauvais arbre ici, mais il ressemble à zéro de la largeur des espaces ont été insérées (pour la poignée molle de l'habillage de texte?) lors de l'affichage des attributs. Peut-être que le "Copier en tant que HTML" fonction n'est pas correctement enlevés?

Mise à jour

Après de jongler avec le Chrome élément inspecteur, je suis presque convaincu que votre errants \u200b sont venus. Remarquez comment le ligne pouvez envelopper non seulement au visible de l'espace, mais aussi après = ou chars compensée par /([\/;:\)\]\}])/ grâce à l'insertion de largeur nulle de l'espace.

$\u200b (Zero width space) des caractères dans mon code JS. D'où venaient-ils?$

Malheureusement, je n'arrive pas à reproduire votre problème où, par mégarde, ils sont inclus dans votre presse-papiers (j'ai utilisé Chrome 13.0.782.112 sur Win XP).

Il serait certainement soumettre un rapport de bug si votre être en mesure de reproduire le comportement.
- Frais de recherche !
- Cela pourrait être un bug pour code.google.com/p/chromium/issues/list
- Je ne vois pas comment peut-il insérer \u200b entre = et ". Mais dans le cas de ][ il semble tout à fait possible, aussi loin que je peux voir. Merci Shawn!
- La ligne juste avant la cité bloc de code ne .appendChild(document.createTextNode("=\u200B\"")). Je suppose que c'est là que le \u200B après la = qui se passe. Sera mise à jour de la réponse à inclure cette ligne.
- Et je n'arrivais pas à le reproduire. Mais, de toute façon, merci pour votre réponse. La recherche de Chrome code semble être le meilleur moyen d'attraper ce salaud.
- Oh, je vois maintenant. Merci encore!
- Vous êtes les bienvenus.
- Je me demande encore aujourd'hui pourquoi je ne peux pas le reproduire. Peut-être il y a quelques if(theMoonIsFull) condition. Je vais accepter votre réponse dans un jour si il n'y aura pas d'autre réponse avec le bug en fait reproduite.
- J'accepte votre réponse en signe de appretiation de vos efforts (Et parce qu'il semble vraiment cohérent) Laissez la façon dont j'ai réussi à copier ces personnages restent un mystère. Peut-être la raison principale est mon tordu les mains et un peu de malchance. Faut dire que la lune fait a plein au moment de ce qui s'est passé, je vais donc attendre jusqu'à la prochaine, et d'essayer de reproduire le bug!
- Merci. Et bonne chance avec la prochaine pleine lune 😉
InformationsquelleAutor Shawn Chin
7

Que M. Shawn Menton a répondu déjà. Je viens d'arrivé à reproduire le problème, alors que j'étais le copier-coller code jquery dans une page web.

Quand il est arrivé: la Copie de texte à partir de Google Chrome Version 41.0.2272.118 m ( pas testé avec d'autres navigateurs ) à Dreamweaver fenêtre de code. Cette copié indésirables personnages ainsi que le code comme ce qui se passe ici

vous avez copié du texte à partir d'une page web comme
```
$('.btn-pageMenu').css('display','block');
```
derrière les coulisses, c'est ce qui fait que la ligne
```
<code>&#8203;$('.btn-pageMenu').css('display'&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;,'block');&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;</code>
```
Copié à un éditeur avancé comme celles que vous avez mentionnées ou Dreamweaver donne des erreurs dans le navigateur, sans doute à défaut de code javascript trop
```
Uncaught SyntaxError: Unexpected token ILLEGAL
```
Solution: Quand il arrive, embrasser la valeur du bloc-notes jusqu'à ce est résolu par les grands. Il est plus liée à l'éditeur puis les navigateurs.

InformationsquelleAutor mobby
1

Ce qui m'est arrivé lorsque j'ai copié le code source à partir d'un autre site de mon éditeur.
Si votre utilisation de code de visual studio ou un Atome de l'éditeur, cela permettra de mettre en évidence ces fichus caractères de largeur nulle espace \u200b) etc.
- VSCode: https://marketplace.visualstudio.com/items?itemName=nhoizey.gremlins
- Atome de l'éditeur: https://atom.io/packages/highlight-bad-chars
- Sublime Text: https://packagecontrol.io/packages/Gremlins
InformationsquelleAutor cacoder
0

Après plus de 6 ans que je suis arriver le même problème, mais je suis capable de le reproduire.

Je suis en train d'apprendre le JavaScript à partir de ce blog qui contient des extraits de code. Chaque fois que j'ai copier tout le code à partir d'un extrait de code et le coller dans le code JavaScript, des éditeurs de JS Fiddle ou JS Bin je obtenir quelques jetons rouges se répandre dans le code. Voici des captures d'écran du premier extrait de code à partir du dessus de blog dans le JS Fiddle et JS Bin. Survol de la souris sur l'un de ces jetons rouges montre jusqu'à la pointe: "\u200b" (le zéro-largeur de l'espace).

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 ouvrez le fichier dans un navigateur web, j'obtiens les erreurs suivantes dans la console:
- Chrome 63 --> SyntaxError: Invalid ou jeton inattendu
- Firefox 57 --> SyntaxError: caractère illégal
J'espère que cela peut aider un peu pour clarifier les raisons de ces espaces de largeur nulle sont copiés dans le presse-papiers.

InformationsquelleAutor George Dunee
-4

Cela devrait résoudre le problème pour vous:

var element = $('<input size="3" id="foo" name="elements[foo][0]" />'); $('#bar').append(element);

ou vous pourriez faire de cette façon à la rendre plus propre:

$('#bar').append($('<input />').attr({ size: '3', id: 'foo', name: 'elements[foo][0]' }));
- Tu m'a fait mal. Lire ma question-le problème est que j'ai un peu collé ceux Zéro Espaces de Largeur dans mon code dans l'IDE, non pas qu'ils soient générés par Javascript.
InformationsquelleAutor gislikonrad

Vous devez vous connecter pour publier un commentaire.

Mise à jour