前端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-lem="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>
···
展开阅读全文

没有更多推荐了,返回首页