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

Answer 2

当我将源代码从另一个站点复制到我的编辑器中时，这发生在我身上。 如果您使用 Visual Studio 代码或 Atom 编辑器，这将突出显示那些讨厌的字符零宽度空格 \u200b) 等。

• VS代码：https://marketplace.visualstudio.com/items?itemName=nhoizey.gremlins
• 原子编辑器：https://atom.io/packages/highlight-bad-chars
• 崇高文本：https://packagecontrol.io/packages/Gremlins

Answer 3

Shawn Chin 先生已经解决了这个问题。我只是在从网页复制粘贴 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

解决方案：当它发生时，请接受记事本的价值，直到大人物解决此问题。它与编辑器的关系比与浏览器的关系更大。

Answer 4

6 年多后，我遇到了同样的问题，但我能够重现它。

我正在从这个包含代码 sn-ps 的 blog 学习 JavaScript。每当我从 sn-p 复制所有代码并将其粘贴到 JS Fiddle 或 JS Bin 的 JavaScript 编辑器中时，我都会在代码中得到一些红色标记。这是JS Fiddle 和JS Bin 中上述博客文章中第一个代码sn-p 的屏幕截图。将鼠标悬停在这些红色标记之一上会显示提示：“\u200b”（zero-width space）。

我正在使用 Linux Ubuntu 16.04，如果我将代码粘贴到我的一个编辑器（Atom 1.22.1 或 Geany 1.32）中，然后在 Web 浏览器中打开文件，我会在控制台中收到以下错误：

• Chrome 63 --> SyntaxError: Invalid or unexpected token
• Firefox 57 --> SyntaxError: 非法字符

我希望这可能有助于澄清为什么这些零宽度空间会被复制到剪贴板中。

Answer 5

在我当前的项目中，我遇到了与 '\u200b' 零宽度空格字符类似的问题。我需要处理从服务器返回的 JSON 对象。带有“[at]”的电子邮件对象需要替换为“@”字符。令人惊讶的是，其中一些对象的电子邮件地址在“@”及其周围散布着“空格”。

长话短说，我使用 Postman 进行了检查，并将返回的 JSON 仔细检查为 RAW。这是原始示例：

johndoe[at]\u200bxyz.org

我可以在所有那些有问题的电子邮件地址上看到字符“\u200b”。由于只有少数电子邮件地址受到影响，因此我手动删除了该字符。服务器从 Sharepoint 获取数据。