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 程式碼。他們從哪裡來？