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

IT技术 javascript html google-chrome netbeans unicode
2021-02-12 15:38:03

我正在使用 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 编辑器的其他窗格;
  • 谷歌浏览器检查器,“复制为 HTML”操作;
  • Google Chrome 源代码查看页面(非常值得怀疑)。

但是我不能用这两种方法重现这个错误。

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

任何搞砸了我的代码的建议?

5个回答

这是黑暗中的刺。

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

Chrome 检查器屏幕截图

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

如果您能够重现该行为,那么提交错误报告当然是值得的。

我接受您的回答以表示对您的努力表示赞赏(并且因为它看起来非常一致)让我设法复制这些角色的方式仍然是个谜。可能主要是因为我的手歪了,还有一点运气不好。必须说发生这种情况时月亮实际上满的,所以我会等到下一个并尝试复制错误!
2021-03-14 15:38:03
我无法重现它。但是,无论如何,谢谢你的回答。搜索 Chromium 代码似乎是抓住那个混蛋的最好方法。
2021-03-27 15:38:03
我不明白它如何\u200b=之间插入"但在这种情况下,][就我所见这似乎很有可能。谢谢肖恩!
2021-03-30 15:38:03
引用的代码块之前的那行是.appendChild(document.createTextNode("=\u200B\""))我的猜测是这就是\u200B之后=发生的地方将更新答案以包含该行。
2021-03-30 15:38:03
我仍然想知道为什么我不能重现它。可能有什么if(theMoonIsFull)条件吧。如果没有其他答案与实际重现的错误,我将在一天内接受您的答案
2021-04-11 15:38:03

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

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

解决方案:当它发生时,拥抱记事本的value,直到大家伙解决这个问题。它与编辑器的相关性高于浏览器。

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

我正在从这个包含代码片段的博客中学习 JavaScript 每当我从片段中复制所有代码并将其粘贴到 JS Fiddle 或 JS Bin 的 JavaScript 编辑器中时,我都会在代码中散布一些红色标记。以下是JS FiddleJS Bin 中上述博客文章中第一个代码片段的屏幕截图将鼠标悬停在这些红色标记之一上会显示提示:“\u200b”(零宽度空间)。

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

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

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

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

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

johndoe[at]\u200bxyz.org

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