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的朋友一点学习经验小结
Nov 23 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
antd配置config-overrides.js文件的操作
Oct 31 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 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
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
彻底杜绝PHP的session cookie错误
2009/08/09 PHP
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
jQuery模拟窗口抖动效果
2017/03/15 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
Python 爬虫模拟登陆知乎
2016/09/23 Python
python版百度语音识别功能
2019/07/09 Python
python3字符串操作总结
2019/07/24 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
Python 解析简单的XML数据
2020/07/24 Python
Python request中文乱码问题解决方案
2020/09/17 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
大学生就业推荐信范文
2013/11/29 职场文书
学生思想表现的评语
2014/01/30 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
综治工作汇报材料
2014/10/27 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
2015双创工作总结
2015/07/24 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫
mysql数据库实现设置字段长度
2022/06/10 MySQL
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技