文本截断直接元素内容

时间:2015-01-08 07:27:51

标签: javascript jquery html css

我试图截断段落中的文字。段落里面有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;
    });

DEMO

1 个答案:

答案 0 :(得分:2)

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

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

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

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