JS实现含有中文字符串的友好截取功能分析


Posted in Javascript onMarch 13, 2017

本文实例讲述了JS实现含有中文字符串的友好截取功能。分享给大家供大家参考,具体如下:

在显示字符串的时候,避免字符串过长往往会对字符串进行截取操作,通常会用到js 的 substr 或者 substring方法, 以及 字符串的length属性

对于非中文的字符串处理是很简单的,但是中文字符的 length  属性值 是1  而不是 2 ,所以处理就不是很友好了。

例如  你有一个字符串  1234567890   和  一二三四五六七八九零,

你只想显示五位长度,往往会这样操作  str = str.substr(0, 5);

但是 12345  与 一二三四五 所占的宽度是不同的,因为中文往往占2字节, 为了显示效果更好,

故封装下面的js, 他会辨别中文字符的 length 为2

$.String.Substr = function (str, n) {//字符串截取 包含对中文处理
  if (str.replace(/[\u4e00-\u9fa5]/g, "**").length <= n) {
    return str;
  }
  else {
    var len = 0;
    var tmpStr = "";
    for (var i = 0; i < str.length; i++) {//遍历字符串
      if (/[\u4e00-\u9fa5]/.test(str[i])) {//中文 长度为两字节
        len += 2;
      }
      else {
        len += 1;
      }
      if (len > n) {
        break;
      }
      else {
        tmpStr += str[i];
      }
    }
    return tmpStr + " ...";
  }
};

PS:这里再为大家推荐2款在线字符统计工具,都包含对中英文及符号的计算功能,相信对大家有一定参考借鉴价值:

在线字数统计工具:
http://tools.3water.com/code/zishutongji

在线字符统计与编辑工具:
http://tools.3water.com/code/char_tongji

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JQuery SELECT单选模拟jQuery.select.js
Nov 12 Javascript
javascript break指定标签打破多层循环示例
Jan 20 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
JS获取一个未知DIV高度的方法
Aug 09 Javascript
Javascript vue.js表格分页,ajax异步加载数据
Oct 24 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
JS实现直接运行html代码的方法
Mar 13 #Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 #Javascript
jsonp跨域请求实现示例
Mar 13 #Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 #Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 #Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 #Javascript
JS实现的简单拖拽功能示例
Mar 13 #Javascript
You might like
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
php简单压缩css样式示例
2016/09/22 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
jcrop基本参数一览
2013/07/16 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
python抓取网页图片示例(python爬虫)
2014/04/27 Python
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
详解Python中的正则表达式的用法
2015/04/09 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
python实现邮件自动发送
2019/08/10 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
为什么要有struct关键字
2012/05/08 面试题
运动会广播稿100字
2014/01/11 职场文书
迟到检讨书900字
2014/01/14 职场文书
护士毕业自我鉴定
2014/02/07 职场文书
庆七一活动总结
2014/08/27 职场文书
农行心得体会
2014/09/02 职场文书
放假通知格式
2015/04/14 职场文书
学校食堂管理制度
2015/08/04 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书