wake-up-neo.net

(Nullbreite) Zeichen in meinem JS-Code. Wo kommst du her?

Ich entwickle ein Frontend einer Web-App mit NetBeans IDE 7.0.1. Vor kurzem hatte ich einen sehr unangenehmen Fehler, den ich endlich behoben habe.

Sagen Sie, ich habe Code

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

Ich habe bemerkt, dass etwas schiefgelaufen ist, als ich sah, dass das Attribut size in Chrome nicht funktioniert (in anderen Browsern nicht eingecheckt). Als ich dieses Element in Inspector öffnete, wurde es als etwas ähnliches interpretiert

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

Was ziemlich seltsam war. Nach dem manuellen Eingeben der Zeichenkette element war der Fehler beseitigt. Als ich diese Änderung rückgängig machte, bemerkte ich, dass Netbeans mich auf einige Unicode-Zeichen in meinem alten Code aufmerksam machte. Es war \u200b - ein Leerzeichen mit der Breite Null nach jedem '=', zwischen '] [' und am Ende des Strings. Die Zeichenkette schien also normal zu sein, da keine Leerzeichen mit einer Breite von null angezeigt wurden, aber nachdem sie entkommen waren, war meine Zeichenfolge

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

Wo zum Teufel habe ich sie bekommen?

Ich bin nicht sicher, woher ich den Code von element kopiert habe, aber es ist definitiv einer der folgenden:

  • Anderer Bereich des Netbeans-Editors mit HTML-Vorlagendatei;
  • Google Chrome Inspector, Aktion "Als HTML kopieren";
  • Google Chrome-Quellansicht (sehr zweifellos).

Aber ich kann den Fehler damit nicht reproduzieren.

Ich verwende Netbeans 7.0.1 und Google Chrome 13.0 unter Windows 7. Es werden keine Tastaturumschalter oder ähnliches ausgeführt. Ich verwende auch Git für die Versionskontrolle, aber ich habe den Code nicht gezogen, daher ist es sehr unwahrscheinlich, dass Git daran schuld ist. Es kann kein dummer Scherz meiner Kollegen sein, denn sie sind recht gutmütig.

Irgendwelche Vorschläge, die meinen Code durcheinander gebracht haben?

40
Hnatt

Hier ist ein Stich im Dunkeln.

Ich wette auf Google Chrome Inspector. Durchsuchen von durch die Chromquelle, ich habe den folgenden Code-Block entdeckt

    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;
    }

Es ist durchaus möglich, dass ich hier einfach den falschen Baum aufhöre, aber es sieht so aus, als würden bei der Anzeige von Attributen Leerzeichen eingefügt (um weiche Textumbrüche zu behandeln?). Vielleicht hatte die Funktion "Als HTML kopieren" sie nicht ordnungsgemäß entfernt?


Aktualisieren

Nach dem Fummeln mit dem Chrome-Elementinspektor bin ich fast überzeugt, dass Ihr \u200b hierher gekommen ist. Beachten Sie, dass die Zeile nicht nur im sichtbaren Bereich, sondern auch nach = oder Zeichen, die von /([\/;:\)\]\}])/ abgeglichen werden, dank des eingefügten Leerraums umbrochen werden kann.

chrome inspector screenshot

Leider kann ich Ihr Problem nicht replizieren, wenn es versehentlich in Ihre Zwischenablage aufgenommen wurde (ich habe Chrome 13.0.782.112 unter Windows XP verwendet). 

Es lohnt sich sicherlich, einen Fehlerbericht einzureichen , falls Sie das Verhalten reproduzieren können.

46
Shawn Chin

Als Herr Shawn Chin hat es schon angesprochen. Ich habe gerade zufällig das Problem repliziert, als ich Jquery-Code von einer Webseite kopierte.

Wenn es passiert ist: Kopieren von Text aus Google Chrome Version 41.0.2272.118 m (nicht mit anderen Browsern getestet) in das Dreamweaver-Codefenster. Dies kopierte unerwünschte Zeichen entlang des Codes, wie dies hier geschieht

sie haben Text von einer Webseite als kopiert

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

hinter den Kulissen macht dies diese Linie aus

<code><span class="pun">&#8203;</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">&#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;,</span><span class="str">'block'</span><span class="pun">);&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;</span></code>

In einem fortgeschrittenen Editor wie dem von Ihnen genannten oder in Dreamweaver kopierten Fehler werden Fehler im Browser angezeigt, was möglicherweise ebenfalls zu Javascript-Code führt

Uncaught SyntaxError: Unexpected token ILLEGAL

Lösung: Wenn es passiert, umarmen Sie den Wert des Notizblocks, bis dies von den großen Jungs behoben wird. Es hat mehr mit dem Editor als mit den Browsern zu tun.

7
mobby

Dies passierte mir, als ich Quellcode von einer anderen Site in meinen Editor kopierte. Wenn Sie Visual Studio-Code oder Atom Editor verwenden, werden diese lästigen Zeichen mit der Breite Null hervorgehoben. \u200b) usw.

1
cacoder

Nach mehr als 6 Jahren bekomme ich dieselbe Ausgabe, kann sie jedoch reproduzieren.

Ich lerne JavaScript von diesem Blog , das Code-Snippets enthält. Immer, wenn ich den gesamten Code aus einem Snippet kopiere und in die JavaScript-Editoren von JS Fiddle oder JS Bin einfüge, bekomme ich einige rote Token, die sich in den Code einfügen. Hier sind Screenshots des ersten Code-Snippets aus dem obigen Blogeintrag in der JS Fiddle und JS Bin . Wenn Sie den Mauszeiger über eines dieser roten Token bewegen, wird der Hinweis angezeigt: "\ u200b" (das Feld mit Nullbreite ). 

Ich arbeite an Linux Ubuntu 16.04. Wenn ich den Code in einen meiner Editoren (Atom 1.22.1 oder Geany 1.32) einfügen und dann die Datei in Webbrowsern öffne, werden in der Konsole folgende Fehler angezeigt:

  • Chrome 63 -> SyntaxError: Ungültiges oder unerwartetes Token
  • Firefox 57 -> SyntaxError: unzulässiges Zeichen

Ich hoffe, dass dies ein bisschen helfen kann, um zu klären, warum diese Leerzeichen in die Zwischenablage kopiert werden.

0
George Dunee