javascript - 直接元素内容的文本 chop

Question

我正在尝试 chop 段落中的文本。段落内部有 span 标签，所以我编写的脚本正在计算段落内的文本(包括 span 标签内容)。

最终结果(呈现的文本)消除了 span 标签(我需要为 span 标签文本应用不同的样式，因此必须保留 span 标签)。

那么我如何只计算段落的直接内容而不计算其中的 span 文本。

这里是用于 chop 的脚本

    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;
    });

DEMO

Answer 1

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

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

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

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