在显示字符串的时候,避免字符串过长往往会对字符串进行截取操作,通常会用到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实现中英文混合文字溢出友好截取功能的更多相关文章

  1. PHP获取中英文混合字符串长度及截取

    1.字符串长度 PHP获取中英文混合字符串长度的实现代码如下,1中文=1位,2英文=1位,可自行修改 /** * PHP获取字符串中英文混合长度 * @param $str string 字符串 *  ...

  2. js 计算中英文混合字符串长度

    转载请注明来源:https://www.cnblogs.com/hookjc/ function isChinese(str) {    var lst = /[u00-uFF]/;          ...

  3. 用JS来实现于截取中英文混合字符串方法(转载)

    网站制作过程中,提示层文字超出,需要JS做字符串截取,但是呢,我们常常会烦恼文字中英文混合如何判断,因为我们知道在JS中 string.length这个值是不考虑中英文的,但是计算机对中英文的识别是  ...

  4. C#与JS实现 获取指定字节长度 中英文混合字符串 的方法

    平时在作数据库插入操作时,如果用 INSERT 语句向一个varchar型字段插入内容时,有时会因为插入的内容长度超出规定的长度而报错. 尤其是插入中英文混合字符串时,SQL Server中一般中文要 ...

  5. javascript截取字符串(支持中英文混合)

    javascript截取字符串(支持中英文混合) <script type="text/javascript"> var sub=function(str,n){ va ...

  6. ThinkPHP+Smarty模板中截取包含中英文混合的字符串乱码的解决方案

    好几天没写博客了,其实有好多需要总结的,因为最近一直在忙着做项目,但是困惑了几天的Smarty模板中截取包含中英文混合的字符串乱码的问题,终于解决了,所以记录下来,需要的朋友看一下: 出现乱码的原因: ...

  7. Lua截取utf-8编码的中英文混合字符串

    参考博客:UTF8字符串在lua的截取和字数统计[转载] 需求 按字面个数来截取子字符串 函数(字符串, 开始位置, 截取长度) utf8sub(,) = 好1世界哈 utf8sub(,) = 你好1 ...

  8. php截取等长UFT8中英文混合字串

    由于需要,想实现“php截取等长UFT8中英文混合字串”,可是网上找了很多代码不是有乱码就是不能实现等长(以一个中文长度为单位,两个英文字母算一个长度,如‘等长’长度为2,‘UTF8’长度也是2). ...

  9. 中英文混合字符串截取java

    //截取字符串长度(中文2个字节,半个中文显示一个) public String subTextString(String str,int len){ if(str.length()<len/2 ...

随机推荐

  1. 「HNOI 2014」米特运输

    题目链接 戳我 \(Describe\) 谁出的题目啊?这么长的题面,看完就滚粗了.强烈谴责 给一棵树,每个点有一个权值,要求修改一些权值,使: 一个点的权值必须是其所有儿子的权值之和 一个点的儿子权 ...

  2. OpenGL学习脚印:背面剔除(Face Culling)

    写在前面 在绘制封闭类型的几何对象时,开启背面剔除功能能够提高渲染性能.本节简要介绍下背面剔除,示例程序可以在我的github下载. 什么是背面剔除 当我们观察场景中对象时,一般只能以一定角度来观察, ...

  3. 标题title出现不规则背景

    Html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. kvm虚拟化之kvm虚拟机控制台登陆

    vm虚拟机能否像xen虚拟机一样通过virsh console 一样采用字符界面进行linux虚拟机控制台呢,答案是肯定的,默认情况下该命令是不起作用的,需要修改相关文件才能实现. 1. 配置方法如下 ...

  5. 读优&&输优

    很nb的技巧……但奇怪的是只能对文件使用…… 然而交到OJ上或者比赛的时候都没有关系→_→ 我大概也只能弄弄这些花里胡哨的东西了→_→ 原理不清楚,背个板子好了 //minamoto #include ...

  6. is 与 == 的区别;小数据池; 编码与解码

    1, is 与 == 的区别 ==  比较的是两边的值 is   比较的是两边的地址  id () 2,小数据池(在终端中) 数字小数据池的范围 -5 ~ 256 字符串中如果有特殊字符他们的内存地址 ...

  7. ios处理键盘的大小

    iOS的键盘有几个通知 UIKeyboardWillShowNotification UIKeyboardDidShowNotification UIKeyboardWillHideNotificat ...

  8. 模块化之seaJs学习和使用

    使用seaJs也有一阵子了,一直也想抽个时间写个这方面的博客,直到今天才写……也许写的不是很完善,但跟大伙分享也是一种乐趣,不对之处欢迎指出.[抱拳] 时间有限,我这里不过多介绍前端模块化,有兴趣可以 ...

  9. Java函数的联级调用

    String类的方法可以连续调用: String str="abc"; String result=str.trim().toUpperCase().concat("de ...

  10. Java传参都是传引用变量的副本

    最近做练习时碰到一个问题,Java到底是怎样传参的,经过查资料与实验,我发现Java传参都是传引用变量的副本值. 1 Java中的引用变量 1.1 字面值引用变量:即基本数据类型的引用变量 ,如 in ...