我的JS代码中的 u200b（零宽度空格）字符。哪儿来的？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我的JS代码中的 u200b（零宽度空格）字符。哪儿来的？相关的知识，希望对你有一定的参考价值。
我正在使用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不太可能受到责备。这对我的同事来说不是一个愚蠢的玩笑，因为他们非常有礼貌。
有什么建议搞砸了我的代码？
这是在黑暗中刺伤。
我的赌注是谷歌Chrome Inspector。 Searching通过Chromium来源，我发现了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;
}
我很可能只是在这里咆哮错误的树，但在属性显示期间，它看起来像是插入零宽度空格（处理软文本包装？）。也许“复制为HTML”功能没有正确删除它们？
Update
在摆弄Chrome元素检查员之后，我几乎确信这是你的流浪u200b来自哪里。请注意，由于插入的零宽度空间，线不仅可以在可见空间处包裹，而且还可以在=或由/([/;:)]}])/匹配的字符之后包裹。
不幸的是，我无法复制你的问题，因为他们无意中被包含在你的剪贴板中（我在Win XP上使用了Chrome 13.0.782.112）。
如果你能够重现这种行为，那肯定值得submitting a bug report。
正如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
解决方案：当它发生时，拥抱记事本的价值，直到大家伙修复。它与编辑器和浏览器更相关。
超过6年后，我遇到了同样的问题，但我能够重现它。
我正在从这个包含代码片段的blog学习JavaScript。每当我从代码片段中复制所有代码并将其粘贴到JS Fiddle或JS Bin的JavaScript编辑器中时，我会将一些红色代币传播到代码中。以下是JS Fiddle和JS Bin上面博客文章中第一个代码片段的屏幕截图。将鼠标悬停在其中一个红色标记上会显示提示：“ u200b”（zero-width space）。
我正在使用Linux Ubuntu 16.04，如果我将代码粘贴到我的一个编辑器（Atom 1.22.1或Geany 1.32）中，然后在Web浏览器中打开该文件，我在控制台中会收到以下错误：
- Chrome 63 - > SyntaxError：无效或意外的令牌
- Firefox 57 - > SyntaxError：非法字符
我希望这可能有助于澄清为什么这些零宽度空间被复制到剪贴板中。
这应该为你解决：
var element = $('<input size="3" id="foo" name="elements[foo][0]" />');
$('#bar').append(element);
或者你可以这样做，使其更清洁：
$('#bar').append($('<input />').attr({
size: '3',
id: 'foo',
name: 'elements[foo][0]'
}));
以上是关于我的JS代码中的 u200b（零宽度空格）字符。哪儿来的？的主要内容，如果未能解决你的问题，请参考以下文章
删除文档中的 U+200B 零宽度空格字符(Typora显示红点)