javascript -\u200b(零宽度空格)字符在我的 JS 代码中。哪儿来的呢？

Question

我正在使用 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 编辑器的其他面板；
• Google Chrome 检查器，“复制为 HTML”操作；
• Google Chrome 源代码查看页面(非常怀疑)。

但我无法用这两种方法重现错误。

我在 Windows 7 下使用 Netbeans 7.0.1 和 Google Chrome 13.0。没有键盘切换器或类似的东西正在运行。此外，我正在使用 Git 进行版本控制，但我没有提取该代码，因此 Git 不太可能受到指责。这不可能是我同事的愚蠢笑话，因为他们很有礼貌。

谁搞砸了我的代码有什么建议吗？

Answer 1

这是暗中刺杀。

我的赌注是 Google Chrome Inspector。 Searching通过 Chromium 源代码，我发现了 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, "$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;
    }

很可能我只是在这里树错了树，但看起来在属性显示期间插入了零宽度空格(以处理软文本换行？)。也许“复制为 HTML”功能没有正确删除它们？

---

更新

在摆弄 Chrome 元素检查器之后，我几乎确信这就是您的流浪 \u200b 的来源。请注意，该行不仅可以在可见空间换行，而且可以在 = 或 /([\/;:\)\]\}])/ 匹配的字符之后换行，谢谢到插入的零宽度空间。

不幸的是，我无法复制您的问题，因为它们无意中包含在您的剪贴板中(我在 Win XP 上使用 Chrome 13.0.782.112)。

肯定值得submitting a bug report您应该能够重现该行为。