Javascript 直接元素内容的文本截断

我想把这段文字删节成一段。段落内有

span

标记，因此我编写的脚本正在计算段落内的文本（包括span标记内容）

最终结果（渲染文本）是消除

span

标记（我需要为span标记文本应用不同的样式，因此必须保留span标记）

那么，我如何只计算段落的直接内容，而不计算段落中的

span

文本呢

下面是用于截断的脚本

    var showChar = 50;
    var moretext = "more...";
    var lesstext = "less";
    $('p').each(function() {
        var content = $(this).text();

        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(1, content.length - showChar);

            var html = c + '<span class="more"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

            $(this).html(html);
        }    
    });  
    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");  
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });

var showChar=50；
var moretext=“更多…”；
var lesstext=“less”；
$（'p'）。每个（函数（）{
var content=$（this.text（）；
如果（content.length>showChar）{
var c=content.substr（0，showChar）；
var h=content.substr（1，content.length-showChar）；
var html=c+''+h+''；
$（this）.html（html）；
}    
});  
$（“.morelink”）。单击（函数（）{
if（$（this）.hasClass（“更少”））{
$（此）.removeClass（“更少”）；
$（this.html（moretext）；
}否则{
$（此）.addClass（“更少”）；
$（this.html（lesstext）；
}
$（this.parent（）.prev（）.toggle（）；
$（this.prev（）.toggle（）；
返回false；
});

---

您只能使用以下方法选择p标记内的文本节点：

var contents=$(this).contents().filter(function() {
    return this.nodeType == 3;
}).text();

第二种方法很慢，因为它涉及到克隆元素，找到子元素，然后移除它们。但这是你可以做到的

var contents= $(this).clone()
        .children()
        .remove()
        .end()
        .text();

---

在这种情况下，最终结果根本不显示跨距文本。它被完全移除了。您只需在计数时执行此操作，而不需要在生成DOM时执行此操作。我需要生成DOM的解决方案。您曾问过

如何仅计算段落的直接内容，而不计算其中的跨文本。

您到底想要什么。哦，很抱歉，仅包含了这一行问题。我还添加了

（我需要为span标记文本应用不同的样式，因此必须保留span标记）

。如果你能帮上忙，那就太好了。