前端js截取指定长度个数字符 v2.0.0

2.0版本比1.0版本使用时更简洁,无需在设置媒体类型,直接设置数量就可以了
截取字符后的效果图

<p class="sliceStr" data-pc-len="12" data-wap-len="8">这里是文章测试标题,含标点一共二十个字。</p>
<p class="sliceStr" data-wap-len="8">这里是文章测试标题,含标点一共二十个字。</p>
<p class="sliceStr" data-pc-len="8">这里是文章测试标题,含标点一共二十个字。</p>
<script>
	/** 版本 v2.0.0
	 * 2019-4-18 19:22:01
	 * 截取字符串
	 * 使用步骤:
	 *   1.添加 class class="sliceStr"
	 *   3.依据需求添加长度数量控制 电脑端: data-pc-len="16" 手机端:data-wap-len="10"
	 *   5.使用示例 <p class="sliceStr" data-pc-len="10" data-wap-len="8">这里是文章测试标题,含标点一共二十个字。</p>
	 */
	var SliceStr={
		lenDefault:20,
		suffixDefault:" ...",
		slice:function(str,len,suffix){
			switch(arguments.length)
			{
				case 1:
					len = this.lenDefault;
					suffix = this.suffixDefault;
					break;
				case 2:
					suffix = this.suffixDefault;
					break;
				case 3:
					break;
				default:
					return "";
			}
			if(str.length<=len){//修复数量相同时添加截取字符串提示的bug
				return str;
			}
			return str.slice(0,len)+suffix;
		}
	};
	$(function(){
		if($(window).width()<=767){
			$.each($('.sliceStr[data-wap-len]'),function(){
				$(this).html(SliceStr.slice($(this).html(),this.dataset['wapLen']));
			});
		}else{
			$.each($('.sliceStr[data-pc-len]'),function(){
				$(this).html(SliceStr.slice($(this).html(),this.dataset['pcLen']));
			});
		}
	});
</script>
···
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值