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高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
实现只能输入数字的input不用replace方法
Sep 12 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
JS document对象简单用法完整示例
Jan 14 Javascript
Vue实现圆环进度条的示例
Feb 06 Vue.js
Angular性能优化之第三方组件和懒加载技术
May 10 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
一些花式咖啡的配方
2021/03/03 冲泡冲煮
递归列出所有文件和目录
2006/10/09 PHP
php smarty的预保留变量总结
2008/12/04 PHP
WordPress网站性能优化指南
2015/11/18 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
Python入门篇之编程习惯与特点
2014/10/17 Python
Python中的元类编程入门指引
2015/04/15 Python
python下MySQLdb用法实例分析
2015/06/08 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
仓库管理专业个人自我评价范文
2013/11/11 职场文书
2014年公司庆元旦活动方案
2014/03/05 职场文书
软件售后服务方案
2014/05/29 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
工作作风建设心得体会
2014/10/22 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书