u200b(零寬度空格) 字符在我的 JS 代碼。他們從哪裏來？

問題描述

我正在使用 NetBeans IDE 7.0.1 開發 Web 應用程序的前端。最近我有一個非常討厭的 bug，我終於修復了。

説我有代碼

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 字符串 character-in-character 後，錯誤消失了。當我撤消這種變化時，我注意到 Netbeans 在我的舊代碼中提醒了我一些 Unicode 字符。它是 u200b – 每個’=’ 之後的零寬度空格，’][‘ 和字符串結尾之間。所以字符串看起來很正常，因為沒有顯示零寬度的空格，但是在轉義它們之後，我的字符串是

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

現在我到底在哪裏得到他們？

我不知道我從哪裏複製了 element 的代碼，但它絕對是以下之一：

帶有 HTML 模板文件的 Netbeans Editor 的其他窗格;
Google Chrome 檢查器，「複製為 HTML」操作;
Google Chrome 源代碼視圖頁面 (非常懷疑) 。

但是我無法再複製這個錯誤。

我在 Windows 7 下使用 Netbeans 7.0.1 和 Google Chrome 13.0 。沒有鍵盤切換器或任何類似的東西正在運行。另外我使用 Git 進行版本控制，但是我沒有提供這個代碼，所以 Git 是不大可能的。這不是我同事的一個愚蠢的笑話，因為他們是相當 well-mannered 。

任何建議誰搞砸了我的代碼？

最佳解決方法

這是黑暗中的刺。

我的賭注將在 Google Chrome 瀏覽器上。 Searching 通過 chrome 源，我發現 the following block of code

    if (hasText)
        attrSpanElement.appendChild(document.createTextNode("=u200B""));

    if (linkify && (name === "src" || name === "href")) {
        var rewrittenHref = WebInspector.resourceURLForRelatedNode(node, value);
        value = value.replace(/([/;:)]}])/g, "$1u200B");
        attrSpanElement.appendChild(linkify(rewrittenHref, value, "webkit-html-attribute-value", node.nodeName().toLowerCase() === "a"));
    } else {
        value = value.replace(/([/;:)]}])/g, "$1u200B");
        var attrValueElement = attrSpanElement.createChild("span", "webkit-html-attribute-value");
        attrValueElement.textContent = value;
    }

很可能我在這裏簡單地指出了錯誤的樹，但是在顯示屬性時看起來像是插入了 zero-width 空格 (處理軟文本包裝？) 。也許「複製為 HTML」功能沒有正確刪除它們？

Update

在 Chrome 元素檢查員擺脱困境之後，我幾乎相信 u200b 來自哪裏。請注意，線條不僅可以在可見空間中包裝，還可以在=或/([/;:)]}])/匹配的字符之後，由於插入的 zero-width 空間。

不幸的是，我無法複製您的問題，無意中將其包含在剪貼板中 (我在 Win XP 中使用 Chrome 13.0.782.112) 。

如果你能夠重現這個行為，肯定會值得 submitting a bug report 。

次佳解決方法

正如 Shawn Chin 先生已經解決。當我從網頁上覆制粘貼 jQuery 代碼時，我剛剛複製了這個問題。

發生時：將文本從 Google Chrome 版本 41.0.2272.118 m(未用其他瀏覽器測試) 複製到 Dreamweaver 代碼窗口。這樣複製了不必要的字符沿着這樣的代碼

您將文本從網頁複製為

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

幕後，這是什麼讓這條線

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

複製到像您提到的高級編輯器，或 Dreamweaver 在瀏覽器中發生錯誤，也可能會導致 JavaScript 代碼失敗

Uncaught SyntaxError: Unexpected token ILLEGAL

解決方案：當發生這種情況時，擁抱記事本的價值，直到大家解決。它與編輯器更相關，然後是瀏覽器。

參考文獻

u200b (Zero width space) characters in my JS code. Where did they came from?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

u200b(零寬度空格) 字符在我的 JS 代碼。他們從哪裏來？