为什么p标签的内容什么都没有，但它的长度是1

Why the content of p tag is nothing but it has a length is 1?

本文关键字：标签 什么 为什么      更新时间：2023-09-26

我有一段HTML代码，如下所示

<div id="test">
  <img width="570" title="20160201121020_208.png" src="/201602/01/20160201121020_208.png" hasele="">
  <p>&#8203;&nbsp;</p>
  <p>

  </p>
</div>

我的 JavaScript 代码如下

$("#test").children().each(function(idx, p){
    node = $(p);
    if(node.is("div") || node.is("p")){
        var txt = $.trim(node.text());
        if(txt != ""){
            console.log("========="+ txt + ":" + txt.length);
        }
    }
});

控制台.log的结果是"=========1"，这让我感到困惑。因为我认为控制台.log应该没有结果。

您有两个p元素：

  1. 一个包含零宽度空格字符和不间断（"硬"）空格字符

  2. 另一个包含各种空格和/或换行符

$.trim将修剪后者，但只会从第一个中删除硬空间（而不是零宽度空间）。如果要删除该零宽度空间，则必须专门执行此操作。（JavaScript 自己的String#trim [spec |MDN]也将留下零宽度空间。

var txt = node.text().replace(/['s'u200B]/g, '');

'u200B是该&#8203; HTML 字符实体的 Unicode 转义。

现场示例：

$("#test").children().each(function(idx, p){
    node = $(p);
    if(node.is("div") || node.is("p")){
        var txt = node.text().replace(/['s'u200B]/g, '');
        if(txt != ""){
            console.log("========="+ txt + ":" + txt.length);
        } else {
            console.log("It's blank");
        }
    }
});
<div id="test">
    <img width="570" title="20160201121020_208.png" src="/201602/01/20160201121020_208.png" hasele="">
    <p>&#8203;&nbsp;</p>
    <p>
  
  
    </p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

相关文章：