html - 为什么“”被注入到我的 HTML 中？

Question

编辑：您可以在这里看到问题（查看源代码）。

EDIT2：有趣，这不是源代码的问题。仅使用控制台（Firebug 也是如此）。

我在一个名为的文件中有以下标记test.html：

&lt;!DOCTYPE html>
<html>
<head>
    <title>Test Harness</title>
    <link href='/css/main.css' rel='stylesheet' type='text/css' />
</head>
<body>
    <h3>Test Harness</h3>
</body>
</html>

但在 Chrome 中，我看到：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    "&#8203;


        "
    <title>Test Harness</title>
    <link href='/css/main.css' rel='stylesheet' type='text/css' />
    <h3>Test Harness</h3>
</body>
</html>

看起来̢是一个零宽度空间，但是是什么造成的呢？我正在使用带有 UTF-8 编码的 Sublime Text 2 和带有 Jinja2 的 Google App Engine（但 Jinja 只是在加载test.html）。有什么想法吗？

提前致谢。

score 28 · Accepted Answer

这是源头的问题。您提供的实时示例以以下字节开头（即，它们出现在之前<!DOCTYPE html>）：0xE2 0x80 0x8B。这可以通过选择“显示格式”下的“十六进制”来查看，例如使用 Rex Swain 的HTTP 查看器。另请注意，使用 W3C 标记验证器验证页面提供的信息表明文档开头存在非常错误的信息，尤其是消息“第 1 行，第 1 列：在没有首先查看文档类型的情况下发现非空格字符”。 </p>

在验证器和 Chrome 工具中发生的事情 - 以及例如在 Firebug 中 - 字节 0xE2 0x80 0x8B 被视为字符数据，隐式启动body元素（因为字符数据不能有效地出现在head元素中或之前） , 暗示它前面有一个空head元素。

当然，解决方案是删除这些字节。浏览器通常会忽略它们，但您不应依赖此类错误处理，并且字节会阻止有用的 HTML 验证。您如何删除它们，以及它们最初是如何到达那里的，取决于您的创作环境。

由于页面（在 HTTP 标头中）被声明为 UTF-8 编码，因此这些字节表示零宽度空格(U+200B) 字符。它没有可见的字形和宽度，因此即使浏览器将其视为body元素开头的数据，您也不会注意到视觉呈现中的任何内容。该符号是它的字符引用，可能被浏览器工具用来指示通常不可见的字符的存在。

生成 HTML 文档的软件可能是要插入零宽度无间隔空格(U+FEFF)。这本来是有效的，因为根据特殊约定，UTF-8 编码的数据可能以该字符开头，当出现在数据开头时，也称为字节顺序标记 ( BOM )。使用 U+200B 代替 U+FEFF 听起来像是软件不太可能犯的错误，但如果人类想到字符的 Unicode名称，他们可能会这样误会。

score 9 · Accepted Answer

我了解 SharePoint 2013 中存在一个错误，HTML 编辑器将这些字符添加到您的内容中。

我一直在处理这个问题，这是我正在使用的解决方案，它似乎正在工作。我将此 javascript 添加到我的母版页引用的文件中。

var elements = ["h1","h2","h3","h4","p","strong","label","span","a"];
function targetZWS(){
    for (var i = 0; i < elements.length; i++) {
      jQuery(elements[i]).each(function() {
        removeZWS(this);
      });
    }
}
function removeZWS(target) {
  jQuery(target).html(jQuery(target).html().replace(/\u200B/g,''));
}

/*load functions*/
$(document).ready(function() {
    _spBodyOnLoadFunctionNames.push("targetZWS");

});

我调查过的链接：

score 4 · Accepted Answer

试试这个脚本。这个对我有用

$( document ).ready(function() {
    var abc = document.body.innerHTML;
    var a = String(abc).replace(/\u200B/g,'');
    document.body.innerHTML = a;
});

score 2 · Accepted Answer

我在我正在从事的一个重大项目中经历过这种情况。

诀窍是：

将整个代码复制到记事本中。
将其保存为文本文件。
关闭文件。再次打开它并将您的代码复制回您的 IDE
环境。

它的voilà，它消失了。！

score 1 · Accepted Answer

就我而言，符号""没有出现在代码编辑器 MS Code 中，并且仅在选项卡 Elements Chrome 中可见。它有助于删除出现此符号的标签，并且再次手写了此标签的重印，显然此符号在传输代码时附着在 ctrl+c / ctrl+v 上。

score 1 · Accepted Answer

这个“8203;” HTML 字符是一个无宽度分隔控件。它可以在Google Chrome 浏览器检查元素部分轻松找到。当您尝试从代码中删除它时，大多数主要 IDE 都没有显示给我......（也许是我的偏好）。

我找到了新的文本编辑器Brackets下载它并在编辑器中打开我的代码。它用红点显示字符。只需将其删除，检查一切是否正常。

我从博客中找到了这个解决方案。什么是“8203”HTML 字符？为什么会被注入到我的 HTML 中？

谢谢你为我节省了时间。

score 1 · Accepted Answer

我可以通过选择周围的字符并复制/粘贴到“查找和替换”中来在 Sublime 中删除这些。

score -2 · Accepted Answer

我在我的页面上找不到它被注入的位置。稍后我会对其进行更多调查，但现在，我只是把它扔到我的页面中，这样我就可以继续工作了。

$(function(){
    $('body').contents().eq(0).each(function(){
        if(this.nodeName.toString()=='#text' && this.data.trim().charCodeAt(0)==8203){
            $(this).remove();
        }
    });
});

html - 为什么“​”被注入到我的 HTML 中？

8 回答 8

Related

Reference

html - 为什么“”被注入到我的 HTML 中？