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 相关文章推荐
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
node.js中express-session配置项详解
May 31 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
vue axios请求超时的正确处理方法
Apr 02 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
解决vue组件中click事件失效的问题
Nov 09 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 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
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
PHP单例模式详细介绍
2015/07/01 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
python使用正则表达式提取网页URL的方法
2015/05/26 Python
python实现验证码识别功能
2018/06/07 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
荷兰手表网站:Watch2Day
2018/07/02 全球购物
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
中专自我鉴定范文
2013/10/16 职场文书
幼儿园家长会邀请函
2014/01/15 职场文书
中学运动会广播稿
2014/01/19 职场文书
个性发展自我评价
2014/02/11 职场文书
医疗纠纷协议书
2014/04/16 职场文书
股权转让协议书
2014/12/07 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android