JS实现中英文混合文字溢出友好截取功能
更新时间：2018年08月06日 17:05:17 作者：抖音
这篇文章主要介绍了JS实现中英文混合文字溢出友好截取功能,通常会用到js的 substr 或者 substring方法, 以及 字符串的length属性。需要的朋友可以参考下
在显示字符串的时候，避免字符串过长往往会对字符串进行截取操作，通常会用到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实现中英文混合文字溢出友好截取功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
下面小编就为大家分享一篇基于wordpress的ajax写法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要为大家详细介绍了countUp.js实现数字动态变化效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
给网页加个彩色窗口...2006-07-07
在js中自一些字符串删除空格的功能，本文章来介绍了字符串删除功能加利用正则快速替换字符串中所有空格实现代码2012-10-10
这篇文章主要为大家详细介绍了javascript自定义滚动条实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-02-02
微信小程序的商户系统一般是以接口的形式开发的,小程序通过调用与后端约定好的接口进行参数的传递以及数据的接收,下面这篇文章主要给大家介绍了关于微信小程序支付功能(前端)的相关资料,需要的朋友可以参考下2023-02-02
有时,我们可能需要翻转Web应用中的媒体元素,所以这篇文章小编为大家详细介绍了三种使用JavaScript翻转图片的方法,希望对大家有所帮助2024-01-01
这篇文章主要帮助大家深入理解javascript模块化，感兴趣的小伙伴们可以参考一下2016-03-03
本文给大家介绍mvc提交表单的四种方法，分别是MVC HtmlHelper方法，传统Form表单Aciton属性提交，Jquery+Ajax 提交表单，MVC Controller控制器和表单参数传递，介绍的非常详细，需要的朋友参考下2016-08-08
这篇文章主要介绍了微信小程序开发之录音机 音频播放 动画实例 (真机可用)，这里整理了详细的代码,有需要的小伙伴可以参考下。2016-12-12
最新评论