JS实现中英文混合文字溢出友好截取功能


Posted in Javascript onAugust 06, 2018

在显示字符串的时候,避免字符串过长往往会对字符串进行截取操作,通常会用到js的 substr 或者 substring方法, 以及 字符串的length属性

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

对于非中文的字符串处理是很简单的,但是中文字符的 length  属性值 是1  而不是 2 ,所以处理就不是很友好了。  

例如  你有一个字符串   'abcdefg' 和   '我爱中华人民共和国'

你只想显示五位长度,往往会这样操作  str = str.substr(0, 5);

但是 'abcde '与 '我爱中华人' 所占的宽度是不同的,因为中文往往占2字节, 为了显示效果更好, 特封装如下函数:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JS实现中英文混合文字溢出友好截取功能</title>
</head>
<body>
<script>
 /**
  * JS实现中英文混合文字溢出友好截取功能
  * @param text 字符串
  * @param length 截取长度
  */
 var zfc = {};
 zfc.mixTextOverflow = function (text, length) {
  if (text.replace(/[\u4e00-\u9fa5]/g, 'aa').length <= length) {
   return text
  } else {
   var _length = 0
   var outputText = ''
   for (var i = 0; i < text.length; i++) {
    if (/[\u4e00-\u9fa5]/.test(text[i])) {
     _length += 2
    } else {
     _length += 1
    }
    if (_length > length) {
     break
    } else {
     outputText += text[i]
    }
   }
   return outputText + '...'
  }
 }
 console.log(zfc.mixTextOverflow('留学NEW SAT essay 题目分析和汇总', 12))
</script>
</body>
</html>

 输出结果:

JS实现中英文混合文字溢出友好截取功能

总结

以上所述是小编给大家介绍的JS实现中英文混合文字溢出友好截取功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
Feb 27 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 Javascript
基于jQuery实现音乐播放试听列表
Apr 14 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 #Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 #Javascript
js实现图片上传并预览功能
Aug 06 #Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 #Javascript
微信小程序网络封装(简单高效)
Aug 06 #Javascript
json字符串传到前台input的方法
Aug 06 #Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 #Javascript
You might like
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
js 解决“options为空或不是对象”
2008/12/22 Javascript
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
Python 的描述符 descriptor详解
2016/02/27 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
python实现文法左递归的消除方法
2020/05/22 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
公务员培训自我鉴定
2014/02/01 职场文书
黄河象教学反思
2014/02/10 职场文书
文明班集体申报材料
2014/05/23 职场文书
企业委托书范本
2014/09/13 职场文书
优秀高中学生评语
2014/12/30 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS