我的JS代码中的\ u200b(零宽度空格)字符.哪儿来的？
Hna*_*att 43 html javascript unicode netbeans google-chrome
我正在使用NetBeans IDE 7.0.1开发Web应用程序的前端.最近我有一个非常讨厌的bug,我终于解决了.
说我有代码
var element = '<input size="3" id="foo" name="elements[foo][0]" />';
$('#bar').append(element);
当我看到该size属性在Chrome中不起作用时(我没有在其他浏览器中检查过),我注意到出了问题.当我在Inspector中打开该元素时,它被解释为类似的东西
<input id=""3"" name=""elements[foo][0]""
size=""foo"" />
这很奇怪.手动重新键入element字符串字符后,错误消失了.当我撤消改变时,我注意到Netbeans在我的旧代码中提醒我一些Unicode字符.它是\u200b- 在每个'='之后,在'] ['之间和字符串末尾之间的零宽度空格.因此字符串看起来很正常,因为没有显示零宽度空格,但在转义它们之后我的字符串就是
'<input size=\u200b"3" id=\u200b"foo" name=\u200b"elements[foo]\u200b[0]" />\u200b'
我到底在哪里得到它们？
我不知道我element从哪里复制了代码,但它绝对是以下之一:
- Netbeans编辑器的其他窗格,带有HTML模板文件;
- Google Chrome Inspector,"复制为HTML"操作;
- Google Chrome源视图页面(非常值得怀疑).
但我无法用这两种方法重现这个错误.
我在Windows 7下使用Netbeans 7.0.1和Google Chrome 13.0.没有键盘切换器或类似的东西在运行.此外,我正在使用Git进行版本控制,但我没有提取该代码,因此Git不太可能受到责备.这对我的同事来说不是一个愚蠢的玩笑,因为他们非常有礼貌.
有什么建议搞砸了我的代码？
Sha*_*hin 47
这是在黑暗中刺伤.
我的赌注是谷歌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;
}
我很可能只是在这里咆哮错误的树,但在属性显示期间,它看起来像是插入零宽度空格(处理软文本包装？).也许"复制为HTML"功能没有正确删除它们？
更新
在摆弄Chrome元素检查员之后,我几乎确信这是你的流浪所在\u200b.请注意=,/([\/;:\)\]\}])/由于插入的零宽度空间,线不仅可以在可见空间处包裹,而且还可以在之后匹配或匹配.
不幸的是,我无法复制你的问题,因为他们无意中被包含在你的剪贴板中(我在Win XP上使用了Chrome 13.0.782.112).
如果您能够重现行为,那么提交错误报告肯定是值得的.
- 很酷的研究! (5认同)
当我将源代码从另一个站点复制到我的编辑器时，这发生在我身上。如果您使用 Visual Studio 代码或 Atom 编辑器，这将突出显示那些讨厌的字符零宽度空间\u200b)等。
- VSCode：https ://marketplace.visualstudio.com/items ? itemName = nhoizey.gremlins
- 原子编辑器： https //atom.io/packages/highlight-bad-chars
- 崇高的文字：https : //packagecontrol.io/packages/Gremlins
正如Shawn Chin先生已经解决过的那样.当我从网页上复制粘贴jquery代码时,我碰巧复制了这个问题.
发生这种情况时:将文本从谷歌浏览器版本41.0.2272.118 m(未经其他浏览器测试)复制到Dreamweaver代码窗口.这会在代码中复制不需要的字符,就像这里发生的那样
您从网页复制文本为
$('.btn-pageMenu').css('display'???????????????????????????,'block');??????
在幕后,这就是这条线的原因
<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>
复制到您提到的高级编辑器或Dreamweaver在浏览器中出错,可能也是javascript代码失败
Uncaught SyntaxError: Unexpected token ILLEGAL
解决方案:当它发生时,拥抱记事本的价值,直到大家伙修复.它与编辑器和浏览器更相关.