javascript - 为什么p标签的内容是什么都没有但长度却是1？

Question

我有一段 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);
        }
    }
});

console.log的结果是“=========1”，这让我很困惑。因为我认为console.log应该没有结果。

Answer 1

您有两个 p 元素:

1. 包含一个零宽度空格字符和一个不间断(“硬”)空格字符

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

$.trim将 trim 后者，但只会从第一个中删除硬空间(不是零宽度空间)。如果您想删除该零宽度空间，则必须专门这样做。 (JavaScript 自己的 String#trim [ spec | MDN ] 也会留下零宽度的空格。)

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

\u200B 是该 ​ 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>