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 相关文章推荐
表单元素事件 (Form Element Events)
Jul 17 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
自己使用js/jquery写的一个定制对话框控件
May 02 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 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常用表单验证类用法实例
2015/06/18 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
js控制框架刷新
2008/08/01 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
js实现继承的5种方式
2015/12/01 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
带你快速理解javascript中的事件模型
2017/08/14 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
python基础梳理(一)(推荐)
2019/04/06 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
电大自我鉴定范文
2013/10/01 职场文书
试用期员工考核制度
2014/01/22 职场文书
内衣营销方案
2014/03/15 职场文书
4s店市场专员岗位职责
2014/04/09 职场文书
班级学习计划书
2014/04/27 职场文书
宇宙与人观后感
2015/06/05 职场文书
餐厅开业活动方案
2019/07/08 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书