u200b (零宽度空间)字符在我的 JS 代码中.哪儿来的呢? [英] u200b (Zero width space) characters in my JS code. Where did they come from?

问题描述

我正在使用 NetBeans IDE 7.0.1 开发 Web 应用程序的前端.最近我遇到了一个非常讨厌的错误，我终于修复了.

说我有代码

var element = '';$('#bar').append(element);

当我看到 size 属性在 Chrome 中不起作用(没有在其他浏览器中检查)时，我注意到出了点问题.当我在 Inspector 中打开该元素时，它被解释为类似

这很奇怪.手动重新键入 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.这不会是我同事的愚蠢笑话，因为他们很有礼貌.

对我的代码有什么建议?

解决方案

黑暗中的刺痛.

我的赌注是 Google Chrome Inspector.当然是值得的.

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.

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

<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

'<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;
• Google Chrome Inspector, 'Copy as HTML' action;
• Google Chrome source view page (very doubtfully).

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.

Any suggestions who messed up my code?

解决方案

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

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

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?

---

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.

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

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

这篇关于u200b (零宽度空间)字符在我的 JS 代码中.哪儿来的呢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！