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 相关文章推荐
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
详解通过JSON数据使用VUE.JS
May 26 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
Vue实现动态查询规则生成组件
May 27 Vue.js
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日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
php微信公众号开发模式详解
2016/11/28 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
python求斐波那契数列示例分享
2014/02/14 Python
Python实现网站注册验证码生成类
2017/06/08 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
Python random模块的使用示例
2020/10/10 Python
护理毕业生自荐信范文
2013/12/22 职场文书
珍珠奶茶店创业计划书
2014/01/11 职场文书
个人欠款担保书
2014/05/20 职场文书
公司经理任命书
2014/06/05 职场文书
初二学生评语大全
2014/12/26 职场文书
2015年档案室工作总结
2015/05/23 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript
PHP正则表达式之RCEService回溯
2022/04/11 PHP
Golang数据类型和相互转换
2022/04/12 Golang