Question

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

说我有代码

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的代码，但它绝对是以下之一：

带有HTML模板文件的Netbeans编辑器的其他窗格;
Google Chrome Inspector，“复制为HTML”操作;
Google Chrome源视图页面（非常值得怀疑）。

但我无法用这两种方法重现这个错误。

我在Windows 7下使用Netbeans 7.0.1和Google Chrome 13.0。没有键盘切换器或类似的东西正在运行。此外，我正在使用Git进行版本控制，但我没有提取该代码，因此Git不太可能受到责备。这不是我同事们的愚蠢笑话，因为他们很有礼貌。

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

Answer 1

这是在黑暗中刺伤。

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

更新

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

chrome inspector screenshot

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

如果你能够重现这种行为，那肯定是值submitting a bug report。

Answer 2

正如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

解决方案：当它发生时，拥抱记事本的价值，直到大家解决这个问题。它与编辑器和浏览器更相关。

Answer 3

当我将源代码从另一个站点复制到编辑器中时，这发生在我身上。如果您使用Visual Studio代码或Atom编辑器，则会突出显示那些讨厌的字符，零宽度\u200b)等。

VSCode：https://marketplace.visualstudio.com/items?itemName=nhoizey.gremlins
Atom编辑器：https://atom.io/packages/highlight-bad-chars
崇高文字：https://packagecontrol.io/packages/Gremlins

Answer 4

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

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

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

Chrome 63 - ＆gt; SyntaxError：无效或意外的令牌
Firefox 57 - ＆gt; SyntaxError：非法字符

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

Answer 5

在我当前的项目中，'\ u200b'零宽度空格字符存在类似的问题。我需要处理从服务器返回的JSON对象。带有“ [at]”的电子邮件对象需要替换为“ @”字符。令人惊讶的是，其中的几个对象的电子邮件地址在“ @”内和周围都有“空格”。

长话短说，我使用Postman进行了检查，并将返回的JSON仔细检查为RAW。这是原始示例：

johndoe[at]\u200bxyz.org

我可以在所有出现问题的电子邮件地址上看到字符'\ u200b'。由于只有几个电子邮件地址受到影响，因此我手动删除了该字符。服务器从Sharepoint获取数据。

Answer 6

这应该为你解决：

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（零宽度空格）字符。哪儿来的？

6 个答案:

更新