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 相关文章推荐
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 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
一个取得文件扩展名的函数
2006/10/09 PHP
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
php数组的概述及分类与声明代码演示
2013/02/26 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
python3下载抖音视频的完整代码
2019/06/05 Python
Python Collatz序列实现过程解析
2019/10/12 Python
python读取ini配置文件过程示范
2019/12/23 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
保时捷设计:Porsche Design
2019/03/30 全球购物
商得四方公司面试题(gid+)
2014/04/30 面试题
违反课堂纪律检讨书
2014/01/19 职场文书
员工趣味活动方案
2014/08/27 职场文书
岳庙导游词
2015/02/04 职场文书
简爱读书笔记
2015/06/26 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
常用的Python代码调试工具总结
2021/06/23 Python
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
Vue全局事件总线你了解吗
2022/02/24 Vue.js