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

问题描述

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

说我有代码

  var element ='< input size =3id =fooname =elements [foo] [0]/>'; 
 $（'＃bar'）。append（element）; 
  

我注意到当我看到 size 属性（未在其他浏览器中选中）。当我在Inspector中打开该元素时，它被解释为类似于



 < input id =& quot; 3& QUOT;名称= &安培; QUOT;元素[富] [0]&安培; QUOT; 
 size =& quot; foo& quot; /> 
  

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



 '<输入大小= \\\​3id = \\\​fooname = \\\​elements [foo] \\\​ [0]/> \\\​'
  
 
 
 
现在我到底在哪儿弄到了他们？
 
 
 
我不确定我在哪里复制了元素的代码，但它肯定是以下内容之一： 
 
 
 
 
其他具有HTML模板文件的Netbeans编辑器窗格; 
 
 
 Google Chrome浏览器检查器，复制为HTML操作; 
 
 
 Google Chrome源视图页面）
 
 
 
 
但我无法重现这两种错误。
 
 
 
我在Windows 7下使用Netbeans 7.0.1和Google Chrome 13.0。没有键盘切换器或类似的东西在运行。此外，我使用Git进行版本控制，但是我没有取得该代码，所以Git不太可能是责备。这不可能是我同事们的一个愚蠢的笑话，因为他们的态度很好。
 
 
 
任何建议都搞乱了我的代码？
解决方案
这是黑暗中的刺。我的赌注是Google Chrome Inspector。通过Chromium来源搜索，我发现了以下区块代码 
  if（hasText）
 attrSpanElement.appendChild（document.createTextNode（= \\\​ \））; 
 
 if（linkify&&（name ===src|| name ===href））{
 var rewrittenHref = WebInspector .resourceURLForRelatedNode（node，value）; 
 value = value.replace（/（[\ /;：\）\] \}]）/ g，$ 1\\\​）; 
 attrSpanElement.appendChild（linkify（rewriteHref，value，webkit-html-attribute-value，node.nodeName（）。toLowerCase（）===a））; 
} else {
 value = value.replace（/（[\ /;：\）\] \}]）/ g，$ 1\\\​）; 
 var attrValueElement = attrSpanElement.createChild（span，webkit-html-attribute-value）; 
 attrValueElement.textContent = value; 
 
 $ / code> 
这很可能是我在这里简单地叫出错误的树，但它看起来在显示属性期间插入了零宽度的空格（用于处理软文本换行？）。或许复制为HTML功能没有正确删除它们？
 
 
 
 
 
 
更新
 
 
 
在Chrome元素检查器摆弄之后，我几乎相信这是您的流浪 \\\​ 来自哪里。请注意，该行不仅可以在可见空间打包，而且可以在 = 之后打包，或者在 /（[\ /;：\\ \\）\\ \\] \}]）/ 感谢插入的零宽度空间。  $ b 
  
 
 
 
不幸的是，我无法复制您的问题，因为它们无意中包含在剪贴板中（我在Win XP上使用了Chrome 13.0.782.112）。 
 
 
 
这绝对值得提交错误报告
 a>应该能够重现该行为。
 
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, "$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?



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.

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