js 截取固定长度字符串但不打断单词

适用地方:英文网站中,比如面包屑导航处新闻标题过长、用css截取文本简介时将单词打断
 
// 使用方法
// 1.复制下面函数
// 2.调用
// 3.填参数  sliceString(targetDom,length,addString)
//    targetDom  对应要处理字符串的标签(格式为css选择器)(!标签里不能套标签!)
//    length        需要截取的长度(格式为number类型) 
//    addString  截取完成后加上的字符串(选填,默认为空,格式为string类型)
//    例如      sliceString('#list li a',100,' (╯‵□′)╯︵┻━┻');
//        或者  sliceString('#list li a',100);
 
 
function sliceString(targetDom,length,addString){
        var targetStr,// 目标字符串
            _this,// 保存当前this
            addStr = addString ? addString : '',// 截取后添加的字符串
            sliceLength = length;// 截取字符串长度
        jQuery(targetDom).each(function(){
            _this = jQuery(this);
            targetStr = _this.text();
            if(targetStr.length <= sliceLength){
                return true;
            }
            for(;sliceLength > 0;sliceLength--){
                if(targetStr.charAt(sliceLength) == ' '){
                    targetStr = targetStr.slice(0,sliceLength) + addStr;
                    sliceLength = length;
                    break;
                }
            }
            _this.text(targetStr);
        });
    }
    sliceString('#list li a',100,' (╯‵□′)╯︵┻━┻');
 
 
备注:这个功能其实应该交由后端实现的  (╯‵□′)╯︵┻━┻ , 前端萌新怼不过后端就自己考虑实现吧 = =
 

posted on 2018-01-06 10:35  杨俊飞  阅读(1479)  评论(0编辑  收藏  举报

导航