web-dev-qa-db-ja.com

私のJSコードの\ u200b（ゼロ幅スペース）文字。彼らはどこから来ましたか？

NetBeans IDE 7.0.1。を使用してWebアプリのフロントエンドを開発しています。最近、非常に厄介なバグがあり、最終的に修正しました。

私はコードを持っていると言う

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

size属性がChrome（他のブラウザーではチェックされていません）。Inspectorでその要素を開いたとき、動作しませんでした。それは次のようなものとして解釈されました

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

どちらかというと奇妙だった。 element文字列を文字ごとに手動で再入力すると、バグはなくなりました。その変更を元に戻したとき、Netbeansが私の古いコードのいくつかのUnicode文字について警告していたことに気付きました。そうだった \u200b-各 '='の後、 '] ['の間および文字列の末尾にゼロ幅のスペース。したがって、幅がゼロのスペースが表示されなかったため、文字列は正常に見えましたが、エスケープした後、私の文字列は

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

今、私はそれらをどこで手に入れましたか？

elementのコードをどこからコピーしたかわかりませんが、間違いなく次のいずれかです。

  • HTMLテンプレートファイルを含むNetbeans Editorのその他のペイン。
  • Google Chrome Inspector、 'Copy as HTML'アクション;
  • Google Chromeソースビューページ（非常に疑わしい）。

しかし、そのどちらでもバグを再現することはできません。

Netbeans 7.0.1およびGoogle Chrome 13.0でWindows 7を使用しています。キーボードスイッチャーなどは実行されていません。また、バージョン管理にGitを使用していますが、それをプルしませんでしたそれは、Gitが非難される可能性が非常に低いことです。

私のコードを台無しにした提案はありますか？

javascripthtmlgoogle-chromenetbeansunicode
43
Hnatt

暗闇での刺し傷です。

私の賭けはGoogleになりますChrome Inspector。 Searching Chromiumソースを通して、私は見つけました 次のコードブロック

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

ここで間違ったツリーを単純にbarでている可能性は十分にありますが、属性の表示中に（ソフトテキストの折り返しを処理するために）幅がゼロのスペースが挿入されているようです。 「HTMLとしてコピー」機能で適切に削除されなかったのでしょうか？

更新

Chrome要素インスペクターをいじった後、私はそれがあなたの浮遊_\u200b_がどこから来たのかほぼ確信しています。行が可視空間だけでなく_=_または/([\/;:\)\]\}])/に一致する文字は、挿入されたゼロ幅スペースのおかげです。

chrome inspector screenshot

残念ながら、クリップボードに誤って含まれてしまう問題を再現することはできません（Win XPではChrome 13.0.782.112を使用しました）。

確かに価値があります バグレポートを提出する 振る舞いを再現できるはずです。

47
Shawn Chin

ショーンチン 氏は既に対処しているので。 Webページからjqueryコードをコピーしてコピーしているときに、たまたま問題を再現しました。

発生時：GoogleからのテキストのコピーChromeバージョン41.0.2272.118 m（他のブラウザではテストされていません）からDreamweaverコードウィンドウへ。これにより、このようなコードに沿って不要な文字がコピーされます

あなたはウェブページからテキストをコピーしました

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

舞台裏では、これがそのラインを作るものです

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

あなたが言及したような高度なエディタにコピーしたか、Dreamweaverがブラウザにエラーを与え、おそらくJavaScriptコードも失敗する

Uncaught SyntaxError: Unexpected token ILLEGAL

解決策：それが起こるとき、これが大物によって修正されるまで、メモ帳の価値を受け入れてください。ブラウザよりもエディタに関連しています。

7
mobby

これは、ソースコードを別のサイトからエディターにコピーしたときに起こりました。 Visual StudioコードまたはAtomエディターを使用している場合、これはそれらの厄介な文字ゼロ幅スペース\u200b)など.

1
cacoder

6年以上後、同じ問題が発生していますが、再現することができます。

コードスニペットを含む ブログ からJavaScriptを学んでいます。スニペットからすべてのコードをコピーして、JS FiddleまたはJS BinのJavaScriptエディターに貼り付けるたびに、コードに赤いトークンが広がります。次のコードスニペットのスクリーンショットを次に示します。 JS Fiddle および JS Bin の上記のブログ投稿。これらの赤いトークンのいずれかにマウスを合わせると、ヒント「\ u200b」（ ゼロ幅のスペース ）。

Linux Ubuntu 16.04で作業しています。エディター（Atom 1.22.1またはGeany 1.32）の1つにコードを貼り付け、Webブラウザーでファイルを開くと、コンソールに次のエラーが表示されます。

  • Chrome 63-> SyntaxError：無効または予期しないトークン
  • Firefox 57-> SyntaxError：不正な文字

これらのゼロ幅のスペースがクリップボードにコピーされる理由を明らかにするのに少し役立つかもしれないと思います。

0
George Dunee