我的JS代码中的\ u200b（零宽度空格）字符。哪儿来的呢？

I am developing a front end of a web app using NetBeans IDE 7.0.1. Recently I had a very nasty bug, which I finally fixed.

我正在使用NetBeans IDE 7.0.1开发Web应用程序的前端。最近我有一个非常讨厌的bug，我终于解决了。

Say I have code

说我有代码

var element = '<input size="3" id="foo" name="elements[foo][0]" />';
$('#bar').append(element);

I noticed that something gone wrong when I saw that size attribute doesn't work in Chrome (didn't checked in other browsers). When I opened that element in Inspector, it was interpreted as something like

当我看到尺寸属性在Chrome中不起作用时（我没有在其他浏览器中检查过），我注意到出了问题。当我在Inspector中打开该元素时，它被解释为类似的东西

<input id="&quot;3&quot;" name="&quot;elements[foo][0]&quot;" 
    size="&quot;foo&quot;" />

Which was rather strange. After manually retyping the element string character-in-character, the bug was gone. When I undo'ed that change I noticed that Netbeans alerted me about some Unicode characters in my old code. It was \u200b - a zero width spaces after each '=', between '][' and in the end of the string. So the string appeared normal because zero width spaces wasn't displayed, but after escaping them my string was

这很奇怪。手动重新键入元素字符串字符后，错误消失了。当我撤消改变时，我注意到Netbeans在我的旧代码中提醒我一些Unicode字符。它是\ u200b - 在每个'='之后，在'] ['和字符串末尾之间的零宽度空格。因此字符串显示正常，因为没有显示零宽度空格，但在转义它们后我的字符串是

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

Now where the hell did I get them?

我到底在哪里得到它们？

I'm not sure where did I copied the code of element from, but it's definitely one of the following:

我不知道我从哪里复制了元素代码，但它绝对是以下之一：

• Other pane of Netbeans Editor with HTML template file;
• 带有HTML模板文件的Netbeans Editor的其他窗格;
• Google Chrome Inspector, 'Copy as HTML' action;
• Google Chrome Inspector，“复制为HTML”操作;
• Google Chrome source view page (very doubtfully).
• Google Chrome源视图页面（非常值得怀疑）。

But I can't reproduce the bug with neither of that.

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

I use Netbeans 7.0.1 and Google Chrome 13.0 under Windows 7. No keyboard switchers or anything like it is running. Also I'm using Git for version control, but I didn't pulled that code, so it is very unlikely that Git is to blame. It can't be a stupid joke of my colleagues, because they are quite well-mannered.

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

Any suggestions who messed up my code?

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

4 个解决方案

#1

Here's a stab in the dark.

这是在黑暗中刺伤。

My bet would be on Google Chrome Inspector. Searching through the Chromium source, I spotted the following block of code

我的赌注是谷歌Chrome Inspector。通过Chromium源搜索，我发现了以下代码块

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

It's quite possible that I'm simply barking up the wrong tree here, but it looks like zero-width spaces were being inserted (to handle soft text wrapping?) during the display of attributes. Perhaps the "Copy as HTML" function had not properly removed them?

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

---

Update

After fiddling with the Chrome element inspector, I'm almost convinced that's where your stray \u200b came from. Notice how the line can wrap not only at visible space but also after = or chars matched by /([\/;:\)\]\}])/ thanks to the inserted zero-width space.

在摆弄Chrome元素检查员之后，我几乎确信这是你的流浪者来自哪里。注意这条线不仅可以在可见空间处包裹，而且还可以在= /或由/（[\ /;：\）\] \}之间匹配的字符之后包裹）/ /由于插入的零宽度空间。

Unfortunately, I am unable to replicate your problem where they inadvertently get included into your clipboard (I used Chrome 13.0.782.112 on Win XP).

不幸的是，我无法复制你的问题，因为他们无意中被包含在你的剪贴板中（我在Win XP上使用了Chrome 13.0.782.112）。

It would certainly be worth submitting a bug report should your be able to reproduce the behaviour.

如果您能够重现行为，那么提交错误报告肯定是值得的。

#2

As Mr Shawn Chin has addressed it already. I just happened to replicate the issue while I was copy pasting jquery code from a webpage.

正如Shawn Chin先生已经提到的那样。当我从网页上复制粘贴jquery代码时，我碰巧复制了这个问题。

When it happened: Copying text from Google Chrome Version 41.0.2272.118 m ( not tested with other browsers ) to Dreamweaver code window. This copied unwanted characters along the code like this happening here

发生这种情况时：将文本从谷歌浏览器版本41.0.2272.118 m（未经其他浏览器测试）复制到Dreamweaver代码窗口。这会在代码中复制不需要的字符，就像这里发生的一样

you copied text from a webpage as

您从网页复制文本为

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

behind the scenes, this is what makes that line

在幕后，这就是这条线的原因

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

Copied to an advanced editor like those you mentioned or Dreamweaver gives errors in browser, probably failing of javascript code too

复制到您提到的高级编辑器或Dreamweaver在浏览器中出错，可能也是javascript代码失败

Uncaught SyntaxError: Unexpected token ILLEGAL

Solution: When it happens, embrace the worth of notepad until this gets fixed by the big guys. It is more related to the editor then the browsers.

解决方案：当它发生时，拥抱记事本的价值，直到大家伙修复。它与编辑器和浏览器更相关。

#3

After longer than 6 years I am getting the same issue but I am able to reproduce it.

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

I am learning JavaScript from this blog which contains code snippets. Whenever I copy all the code from a snippet and paste it into the JavaScript editors of JS Fiddle or JS Bin I get some red tokens spread into the code. Here are screenshots of the first code snippet from the above blog post in the JS Fiddle and JS Bin. Hovering the mouse over one of these red tokens shows up the tip: "\u200b" (the zero-width space).

我正在从这个包含代码片段的博客学习JavaScript。每当我从代码片段中复制所有代码并将其粘贴到JS Fiddle或JS Bin的JavaScript编辑器中时，我会将一些红色代币传播到代码中。以下是JS Fiddle和JS Bin上面博客文章中第一个代码片段的屏幕截图。将鼠标悬停在其中一个红色标记上会显示提示：“\ u200b”（零宽度空间）。

I'm working on Linux Ubuntu 16.04 and if I paste the code into one of my editors (Atom 1.22.1 or Geany 1.32) and then open the file in web browsers, I get the following errors in the console:

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

• Chrome 63 --> SyntaxError: Invalid or unexpected token
• Chrome 63 - > SyntaxError：无效或意外的令牌
• Firefox 57 --> SyntaxError: illegal character
• Firefox 57 - > SyntaxError：非法字符

I hope this may help a bit to clarify why these zero-width spaces get copied into the clipboard.

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

#4

This should fix it for you:

这应该为你解决：

var element = $('<input size="3" id="foo" name="elements[foo][0]" />'); $('#bar').append(element);

var element = $（''）; $（ '＃巴'）附加（元件）。

or you could do it this way to make it cleaner:

或者你可以这样做，使其更清洁：

$('#bar').append($('<input />').attr({ size: '3', id: 'foo', name: 'elements[foo][0]' }));

$（'＃bar'）。append（$（''）。attr（{size：'3'，id：'foo'，name：'elements [foo] [0]'}））;