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 相关文章推荐
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
javascript 节点遍历函数
Mar 28 Javascript
15 个 JavaScript Web UI 库
May 19 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 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
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
php一个找二层目录的小东东
2012/08/02 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
Python实现的最近最少使用算法
2015/07/10 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
python设置环境变量的原因和方法
2019/06/24 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
pandas 时间格式转换的实现
2019/07/06 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
行政助理岗位职责范文
2013/12/03 职场文书
生产班组长岗位职责
2014/01/05 职场文书
关于运动会的稿件
2014/02/02 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
学校百日安全活动总结
2015/05/07 职场文书
Python 中random 库的详细使用
2021/06/03 Python