Javascript \u200b （零宽度空间）字符在我的 JS 代码中。哪儿来的？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7055600/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
\u200b (Zero width space) characters in my JS code. Where did they come from?
提问by Hnatt
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 应用程序的前端。最近我有一个非常讨厌的错误，我终于修复了。
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 sizeattribute doesn't work in Chrome (didn't checked in other browsers). When I opened that element in Inspector, it was interpreted as something like
当我看到该size属性在 Chrome 中不起作用（未在其他浏览器中检查）时，我注意到出了点问题。当我在 Inspector 中打开该元素时，它被解释为类似
<input id=""3"" name=""elements[foo][0]""
size=""foo"" />
Which was rather strange. After manually retyping the elementstring 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
这很奇怪。手动重新element输入字符中的字符串后，错误消失了。当我撤消该更改时，我注意到 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 elementfrom, but it's definitely one of the following:
我不确定我element从哪里复制的代码，但它绝对是以下之一：
- Other pane of Netbeans Editor with HTML template file;
- Google Chrome Inspector, 'Copy as HTML' action;
- Google Chrome source view page (very doubtfully).
- 带有 HTML 模板文件的 Netbeans 编辑器的其他窗格；
- 谷歌浏览器检查器，“复制为 HTML”操作；
- 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?
任何搞砸了我的代码的建议？
回答by Shawn Chin
Here's a stab in the dark.
这是黑暗中的刺。
My bet would be on Google Chrome Inspector. Searchingthrough the Chromium source, I spotted the following block of code
我的赌注是 Google 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, "\u200B");
attrSpanElement.appendChild(linkify(rewrittenHref, value, "webkit-html-attribute-value", node.nodeName().toLowerCase() === "a"));
} else {
value = value.replace(/([\/;:\)\]\}])/g, "\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 \u200bcame 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 元素检查器之后，我几乎确信这就是你的流浪\u200b者的来源。请注意=，/([\/;:\)\]\}])/由于插入的零宽度空间，该行不仅可以在可见空间换行，而且还可以在匹配的之后或字符处换行。
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 reportshould your be able to reproduce the behaviour.
如果您能够重现该行为，那么提交错误报告当然是值得的。
回答by mobby
As Mr Shawn Chinhas 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
发生时间：将文本从 Google Chrome 版本 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">​</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>
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.
解决方案：当它发生时，拥抱记事本的价值，直到大人物解决这个问题。它与编辑器的相关性高于浏览器。
回答by cacoder
This happened to me when I copied source code from another site into my editor.
If your using visual studio code or Atom editor, this will highlight those pesky characters zero-width space \u200b)etc.
当我将源代码从另一个站点复制到我的编辑器时，这发生在我身上。如果您使用 Visual Studio 代码或 Atom 编辑器，这将突出显示那些讨厌的字符零宽度空间\u200b)等。
- VSCode: https://marketplace.visualstudio.com/items?itemName=nhoizey.gremlins
- Atom editor: https://atom.io/packages/highlight-bad-chars
- Sublime Text: https://packagecontrol.io/packages/Gremlins
- VSCode：https://marketplace.visualstudio.com/items ?itemName =nhoizey.gremlins
- Atom 编辑器：https: //atom.io/packages/highlight-bad-chars
- 崇高的文字：https: //packagecontrol.io/packages/Gremlins
回答by George Dunee
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 blogwhich 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 Fiddleand 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）中，然后在网络浏览器中打开文件，我会在控制台中收到以下错误：
- Chrome 63 --> SyntaxError: Invalid or unexpected token
- Firefox 57 --> SyntaxError: illegal character
- Chrome 63 --> SyntaxError: 无效或意外的令牌
- Firefox 57 --> 语法错误：非法字符
I hope this may help a bit to clarify why these zero-width spaces get copied into the clipboard.
我希望这可能有助于澄清为什么这些零宽度空间会被复制到剪贴板中。
