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 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
js/jquery获取文本框输入焦点的方法
Mar 04 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
javascript+css实现进度条效果
Mar 25 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 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
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
php 获取百度的热词数据的代码
2012/02/18 PHP
php中hashtable实现示例分享
2014/02/13 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
类似CSDN图片切换效果脚本
2009/09/17 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
python 与服务器的共享文件夹交互方法
2018/12/27 Python
python日志模块logbook使用方法
2019/09/19 Python
python异常处理try except过程解析
2020/02/03 Python
python logging设置level失败的解决方法
2020/02/19 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
求职自荐信怎么写
2014/03/06 职场文书
创业女性典型材料
2014/05/02 职场文书
春秋淹城导游词
2015/02/11 职场文书