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

Posted

技术标签:

【中文标题】\u200b(零宽度空间)字符在我的 JS 代码中。哪儿来的呢?【英文标题】:\u200b (Zero width space) characters in my JS code. Where did they come from? 【发布时间】:2011-10-26 16:52:48 【问题描述】:

我正在使用 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 检查器,“复制为 HTML”操作; Google Chrome 源代码查看页面(非常可疑)。

但我无法重现错误。

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

有什么建议弄乱了我的代码?

【问题讨论】:

可怕。我希望你能找到它。 谢谢,@RichieHindle。我放弃了自己追踪它,希望社区能提供帮助。毕竟在我知道如何修复它之后它并不那么可怕(扫描“\u200b”外观的来源)。但我很好奇这是从哪里来的。 @Hnatt: 你的第二行代码是调用 jQuery 吗?如果是,您能否在进一步使用之前尝试使用 escape() 和/或 encode() 来“警告” var 元素的内容;你能尝试绕过 jQuery 重新编码你的追加(使用 getElementsByTagName()、append())来明确地将 jQuery 伪造为万恶之源吗? @Hnatt/2: 如果是 jQuery,你会建议版本....也许有人试图重现这个使用不同的版本 @MikeD 它是 jQuery 1.4.2,但它与错误无关,因为那些零长度空格是粘贴在 我的代码中,而不是由脚本生成的。我想弄清楚的是我是如何设法将它复制到那里的。 【参考方案1】:

这是在黑暗中刺伤。

我的赌注是 Google 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 的来源。请注意,由于插入的零宽度空间,该行不仅可以在可见空间处换行,还可以在=/([\/;:\)\]\])/ 匹配的字符之后换行。

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

如果您能够重现该行为,那肯定值得submitting a bug report。

【讨论】:

我看不出它如何在=" 之间插入\u200b。但在][ 的情况下,据我所知,这似乎很有可能。谢谢肖恩! 引用代码块之前的行是.appendChild(document.createTextNode("=\u200B\""))。我的猜测是 \u200B= 之后发生的地方。将更新答案以包含该行。 我无法重现它。但是,无论如何,谢谢你的回答。搜索 Chromium 代码似乎是抓住那个混蛋的最佳方法。 我仍然想知道为什么我不能重现它。也许有一些if(theMoonIsFull) 条件。如果实际重现的错误没有其他答案,我会在一天内接受你的答案。 我接受您的回答以表示对您的努力表示赞赏(而且因为它看起来非常一致)让我设法复制这些字符的方式仍然是一个谜。也许主要原因是我的手弯曲和运气不好。必须说,发生这种情况时月亮实际上是满的,所以我会等到下一个并尝试复制错误!【参考方案2】:

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

VS代码:https://marketplace.visualstudio.com/items?itemName=nhoizey.gremlins 原子编辑器:https://atom.io/packages/highlight-bad-chars 崇高文本:https://packagecontrol.io/packages/Gremlins

【讨论】:

【参考方案3】:

Shawn Chin 先生已经解决了这个问题。我只是在从网页复制粘贴 jquery 代码时碰巧复制了这个问题。

发生时间:将文本从 Google Chrome 版本 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

解决方案:当它发生时,请接受记事本的价值,直到大人物解决此问题。它与编辑器的关系比与浏览器的关系更大。

【讨论】:

【参考方案4】:

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

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

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

Chrome 63 --> SyntaxError: Invalid or unexpected token Firefox 57 --> SyntaxError: 非法字符

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

【讨论】:

【参考方案5】:

在我当前的项目中,我遇到了与 '\u200b' 零宽度空格字符类似的问题。我需要处理从服务器返回的 JSON 对象。带有“[at]”的电子邮件对象需要替换为“@”字符。令人惊讶的是,其中一些对象的电子邮件地址在“@”及其周围散布着“空格”。

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

johndoe[at]\u200bxyz.org

我可以在所有那些有问题的电子邮件地址上看到字符“\u200b”。由于只有少数电子邮件地址受到影响,因此我手动删除了该字符。服务器从 Sharepoint 获取数据。

【讨论】:

以上是关于u200b(零宽度空间)字符在我的 JS 代码中。哪儿来的呢?的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript 从字符串中删除零宽度空间(unicode 8203)

在 C# 字符串中摆脱零宽度空间的最简单方法

对于网页中用户输入的特殊字符过滤方法

读取文件时找不到零宽度无间隔

默认情况下如何显示隐藏字符(零宽度空格,即&#8203)

删除文档中的 U+200B 零宽度空格字符(Typora显示红点)