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元素：

包含零宽度空格字符和非破坏（＆＃34;硬＆＃34;）空格字符的文件
另一个包含各种空格和/或换行符

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

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

\u200B是该 HTML字符实体的Unicode转义。

直播示例：

＆＃13;

$("#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 != ""){
            snippet.log("========="+ txt + ":" + txt.length);
        } else {
            snippet.log("It's blank");
        }
    }
});

＆＃13;

<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 provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

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

1 个答案: