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 代码。他们从哪里来？