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闭包实例讲解
Apr 22 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
纯JS前端实现分页代码
Jun 21 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
12个提高JavaScript技能的概念(小结)
May 09 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 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
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
webpack之devtool详解
2018/02/10 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
Python简单实现网页内容抓取功能示例
2018/06/07 Python
python实现自动打卡的示例代码
2020/10/10 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
sealed修饰符是干什么的
2012/10/23 面试题
模具专业推荐信
2013/10/30 职场文书
施工员岗位职责
2014/03/16 职场文书
校园绿化美化方案
2014/06/08 职场文书
单位工作证明范文
2014/09/14 职场文书
个人债务授权委托书
2014/10/17 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
爱心捐书倡议书
2015/04/27 职场文书
民间借贷借条如何写
2015/05/26 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
施工安全责任协议书
2016/03/23 职场文书
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python