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 相关文章推荐
解析Jquery的LigerUI如何实现文件上传
Jul 09 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 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安全配置方法
2007/06/16 PHP
PHP 根据IP地址控制访问的代码
2010/04/22 PHP
php 数组的指针操作实现代码
2011/02/08 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
Python中__call__用法实例
2014/08/29 Python
浅析Python中else语句块的使用技巧
2016/06/16 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
体育教育专业毕业生自荐信
2013/11/15 职场文书
应届生求职自荐信范文
2014/04/07 职场文书
机械工程师岗位职责
2014/06/16 职场文书
小学生春游活动方案
2014/08/20 职场文书
赔偿协议书范本
2014/09/12 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
五年级下册复习计划
2015/01/19 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python