jQuery实现长文本收缩展开插件

大家都知道，很多网站都有那种把较长文本收缩起来，只显示一小部分，后面有个展开/收缩按钮，点击可切换全部显示和只显示一小部分状态。

将要实现效果如下：

    

说句实话，这是一个简单得不能再简单的东西了，我也用Js实现功能（写死在每个页面），可我有十多个页面要用到这东西，就想着把它封装成插件，可我又从来没写过Js插件，项目要得很紧，也没时间去研究，所有就在百度上找看看有没有现成的。

结果找了好多都不是这种效果，到最后好不容易找了一个呢，是国外的，效果也能实现，不过有点小瑕疵。

1.因为作者是老外，所以分割文字时他是在指定的切割位置向后搜索，直到空格时才分割。因为英文单词是不能分割的，而单词间是以空格来区分的。这个用于中文的话就有问题，比如上图那个的文本，没一个空格的。

2.每展开并收缩一次，就会产生一个空的连接标签，虽然界面上看不到，但总觉得不爽。

3.那老外把收缩时的的标志省略号“...”写在展开连接里面的，不像上图是在文本尾部，这样就只能把连接和文本紧挨着，不然就很明显的看到省略号是在连接内。

因为又找不到其他的，一看那个JQuery插件代码也不是太多，所以就试着改一下。

好了，废话少说，直接贴代码。一个是未修改的源插件代码，一个是我改过的代码。

源插件代码（我只是格式化了），文件名：jquery.truncatable.js

(function($) {
    $.fn.truncatable = function(options) {
        var defaults = {
            limit: 100,
            more: '...',
            less: false,
            hideText: '[read less]'
        };
        var options = $.extend(defaults, options);
        return this.each(function(num) {
            var stringLength = $(this).html().length;
            if (stringLength > defaults.limit) {
                var splitText = $(this).html().substr(defaults.limit);
                var splitPoint = splitText.substr(0, 1);
                var whiteSpace = new RegExp(/^\s+$/);
                for (var newLimit = defaults.limit; newLimit < stringLength; newLimit++) {
                    var newSplitText = $(this).html().substr(0, newLimit);
                    var newHiddenText = $(this).html().substr(newLimit);
                    var newSplitPoint = newSplitText.slice( - 1);
                    if (whiteSpace.test(newSplitPoint)) {
                        var hiddenText = '<span class="hiddenText_' + num + '" style="display:none">' + newHiddenText + '</span>';
                        var setNewLimit = (newLimit - 1);
                        var trunkLink = $('<a>').attr('class', 'more_' + num + '');
                        $(this).html($(this).html().substr(0, setNewLimit)).append('<a class="more_' + num + '" href="#">' + defaults.more + '<a/> ' + hiddenText);
                        $('a.more_' + num).bind('click',
                        function() {
                            $('span.hiddenText_' + num).show();
                            $('a.more_' + num).hide();
                            if (defaults.less == true) {
                                $('span.hiddenText_' + num).append('<a class="hide_' + num + '" href="" title="' + defaults.hideText + '">' + defaults.hideText + '</a>');
                                $('a.hide_' + num).bind('click',
                                function() {
                                    $('.hiddenText_' + num).hide();
                                    $('.more_' + num).show();
                                    $('.hide_' + num).empty();
                                    return false
                                })
                            }
                        });
                        newLimit = stringLength
                    }
                }
            }
        })
    }
})(jQuery);

 

下面是我修改的：

(function ($) {
    $.fn.truncaString = function (options) {
        var defaults = {
            length: 100,
            isHide: false,    //初始时是否收缩
            hideClue: false,  //是否显示收缩提示符 “...”
            moreText: '[Expansion]',  //展开按纽文本
            hideText: '[Shrink]',   //收缩按纽文本
            moreTitle: '',  //展开按纽标题（鼠标移上时提示文字）
            hideTitle: '',   //收缩按纽标题（鼠标移上时提示文字）
            boundary: /^\s+$/     //匹配分割符的正则表达式，匹配空格，因为英文单词不能从中间断开 /^(\s|\u002c|\u002e|\uff0c|\u3002|[\u4E00-\u9FA5])+$/
        };
        var options = $.extend(defaults, options);
        return this.each(function (num) {
            var stringLength = $(this).html().length;
            if (stringLength > defaults.length) {
                var whiteSpace = new RegExp(defaults.boundary);
                var moreHtml = '<a class="more_' + num + '" href="#" title="' + defaults.moreTitle + '">' + defaults.moreText + '</a> ';//“展开”按纽
                var hideHtml = '<a class="hide_' + num + '" href="#" title="' + defaults.hideTitle + '">' + defaults.hideText + '</a>';//“收缩”按纽

                //循环把分割点向后移动，直到找到空格
                for (var newLimit = defaults.length; newLimit < stringLength; newLimit++) {
                    var newSplitText = $(this).html().substr(0, newLimit);     //分割点前的字符（一直要显示的）
                    var newHiddenText = $(this).html().substr(newLimit);       //分割点后的字符（要隐藏的）
                    var newSplitPoint = newSplitText.slice(-1);              //拷贝分割点前的字符
                    if (whiteSpace.test(newSplitPoint)) {             //结尾是否匹配分割字符
                        var clue = defaults.hideClue ? '<span class="hideClue_' + num + '">...</span>' : '<span class="hideClue_' + num + '"></span>';
                        var hiddenText = '<span class="hiddenText_' + num + '">' + newHiddenText + '</span>';    //要隐藏的部分
                        var displayText = $(this).html().substr(0, newLimit - 1);     //要显示的部分
                        $(this).html(displayText).append(clue + hiddenText + moreHtml + hideHtml);

                        $('a.more_' + num).bind('click', function () { //展开
                            $('span.hiddenText_' + num).show();
                            $('span.hideClue_' + num).hide();
                            $('a.more_' + num).hide();
                            $('a.hide_' + num).show();
                            return false;
                        });
                        $('a.hide_' + num).bind('click', function () { //隐藏
                            $('span.hiddenText_' + num).hide();
                            $('span.hideClue_' + num).show();
                            $('a.more_' + num).show();
                            $('a.hide_' + num).hide();
                            return false;
                        });

                        if (defaults.isHide) {
                            $('a.hide_' + num).click();
                        } else {
                            $('a.more_' + num).click();
                        }

                        newLimit = stringLength;
                    }
                }
            }
        })
    }
})(jQuery);

调用

$(function () {
                    $('#articleIntroStr').truncaString({
                        length: 150, 
                        hideClue: true, 
                        isHide: true,
                        moreText:"更多",
                        hideText:"收缩",
                        boundary: /^(\s|\u002c|\u002e|[\u4E00-\u9FA5])+$/
                    });
                    });
                });