我的JS代码中的\ u200b(零宽度空格)字符。哪儿来的?

问题描述 投票:42回答:4

我正在使用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="&quot;3&quot;" name="&quot;elements[foo][0]&quot;" 
    size="&quot;foo&quot;" />

这很奇怪。在手动重新输入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不太可能受到责备。这对我的同事来说不是一个愚蠢的玩笑,因为他们非常有礼貌。

有什么建议搞砸了我的代码?

javascript html google-chrome netbeans unicode
4个回答
46
投票

这是在黑暗中刺伤。

我的赌注是谷歌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, "$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”功能没有正确删除它们?


Update

在摆弄Chrome元素检查员之后,我几乎确信这是你的流浪\u200b来自哪里。请注意,由于插入的零宽度空间,线不仅可以在可见空间处包裹,而且还可以在=或由/([\/;:\)\]\}])/匹配的字符之后包裹。

不幸的是,我无法复制你的问题,因为他们无意中被包含在你的剪贴板中(我在Win XP上使用了Chrome 13.0.782.112)。

如果你能够重现这种行为,那肯定值得submitting a bug report


7
投票

正如Shawn Chin先生已经解决过这个问题。当我从网页上复制粘贴jquery代码时,我碰巧复制了这个问题。

发生这种情况时:将文本从谷歌浏览器版本41.0.2272.118 m(未经其他浏览器测试)复制到Dreamweaver代码窗口。这会在代码中复制不需要的字符,就像这里发生的那样

您从网页复制文本为

$('.btn-pageMenu').css('display'​​​​​​​​​​​​​​​​​​​​​​​​​​​,'block');​​​​​​

在幕后,这就是这条线的原因

<code><span class="pun">&#8203;</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">&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;,</span><span class="str">'block'</span><span class="pun">);&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;</span></code>

复制到您提到的高级编辑器或Dreamweaver在浏览器中出错,可能也是javascript代码失败

Uncaught SyntaxError: Unexpected token ILLEGAL

解决方案:当它发生时,拥抱记事本的价值,直到大家伙修复。它与编辑器和浏览器更相关。


0
投票

超过6年后,我遇到了同样的问题,但我能够重现它。

我正在从这个包含代码片段的blog学习JavaScript。每当我从代码片段中复制所有代码并将其粘贴到JS Fiddle或JS Bin的JavaScript编辑器中时,我会将一些红色代币传播到代码中。以下是JS FiddleJS Bin上面博客文章中第一个代码片段的屏幕截图。将鼠标悬停在其中一个红色标记上会显示提示:“\ u200b”(zero-width space)。

我正在使用Linux Ubuntu 16.04,如果我将代码粘贴到我的一个编辑器(Atom 1.22.1或Geany 1.32)中,然后在Web浏览器中打开该文件,我在控制台中会收到以下错误:

  • Chrome 63 - > SyntaxError:无效或意外的令牌
  • Firefox 57 - > SyntaxError:非法字符

我希望这可能有助于澄清为什么这些零宽度空间被复制到剪贴板中。


-4
投票

这应该为你解决:

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]' }));

© www.soinside.com 2019 - 2024. All rights reserved.