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

在显示字符串的时候，避免字符串过长往往会对字符串进行截取操作，通常会用到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实现中英文混合文字溢出友好截取功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

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

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

    在显示字符串的时候,避免字符串过长往往会对字符串进行截取操作,通常会用到js的 substr 或者 substring方法, 以及 字符串的length属性 substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符. substring() 方法用于提取字符串中介于两个指定下标之间的字符. 对于非中文的字符串处理是很简单的,但是中文字符的 length  属性值 是1  而不是 2 ,所以处理就不是很友好了. 例如  你有一个字符串   'abcdefg' 和   '我爱中

  • JS实现含有中文字符串的友好截取功能分析

    本文实例讲述了JS实现含有中文字符串的友好截取功能.分享给大家供大家参考,具体如下: 在显示字符串的时候,避免字符串过长往往会对字符串进行截取操作,通常会用到js 的 substr 或者 substring方法, 以及 字符串的length属性 对于非中文的字符串处理是很简单的,但是中文字符的 length  属性值 是1  而不是 2 ,所以处理就不是很友好了. 例如  你有一个字符串  1234567890   和  一二三四五六七八九零, 你只想显示五位长度,往往会这样操作  str =

  • JS实现简单的文字无缝上下滚动功能示例

    本文实例讲述了JS实现简单的文字无缝上下滚动功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="" /> <title>文字列表无缝滚动代码</title> <style type="text/cs

  • javascript截取字符串(通过substring实现并支持中英文混合)

    javascript截取字符串(支持中英文混合) 复制代码 代码如下: <script type="text/javascript"> var sub=function(str,n){ var r=/[^\x00-\xff]/g; if(str.replace(r,"mm").length<=n){return str;} var m=Math.floor(n/2); for(var i=m;i<str.length;i++){ if(str

  • PHP针对中英文混合字符串长度判断及截取方法示例

    本文实例讲述了PHP针对中英文混合字符串长度判断及截取方法.分享给大家供大家参考,具体如下: /** * * 中英混合字符串长度判断 * @param unknown_type $str * @param unknown_type $charset */ function strLength($str, $charset = 'utf-8') { if ($charset == 'utf-8') $str = iconv ( 'utf-8', 'gb2312', $str ); $num = s

  • 用CSS解决中英文混合字符串的截取省略问题的解决办法

    作为一个程序员,经常需要面对的一个问题就是在新闻等信息的标题列表中,常常为了适应表格的宽度,需要对过长的标题文字的进行截取并在截取后的文字末端加上省略号. 众所周知,有很多方法可以实现这个功能,JavaScript,ASP,PHP都有各自的实现方法,但是面临的问题有很多,比如中英文混杂时或在某些编码下,容易造成截取出现乱码的问题,虽然大多数问题已经有比较成熟的解决方案,但在数据量比较大时,使用JavaScript,ASP,PHP实现这一功能,无疑会给客户端或服务器端造成比较大的资源开销. 随着W

  • C#实现中英文混合字符串截取的方法

    本文实例讲述了C#实现中英文混合字符串截取的方法,是C#字符串操作中非常常用的一个方法.分享给大家供大家参考之用.具体方法如下: 具体功能代码如下: /// <summary> /// 截取中英文混合字符串 /// </summary> /// <param name="text">字符文本</param> /// <param name="length">截取长度</param> /// &l

  • php 截取中英文混合字符串的方法

    php 截取中应为字符串,就不必再用substr或者mb_substr //截取想这样的字符串 a李三 利用ASCII /** * * 中英混合的字符串截取 * @param unknown_type $sourcestr * @param unknown_type $cutlength */ function assoc_substr($sourcestr, $cutlength) { $returnstr = ''; $i = 0; $n = 0; $str_length = strlen

  • JS字符串长度判断,超出进行自动截取的实例(支持中文)

    JS字符串长度判断,超出进行自动截取的实例(支持中文)

    今天一个小弟问我的问题,在文本框中输入字符,如果超出指定长度,就把它截取,要求中文等于两个字符的长度,我找一下资料,把这个功能实现了, 下面是JS代码: <html> <script src="http://jb51.net/script/jquery.js" type="text/javascript"></script> <body> <input type="text" name=&qu

  • JS实现输入框提示文字点击时消失效果

    本文实例讲述了JS实现输入框提示文字点击时消失效果.分享给大家供大家参考,具体如下: 在网页登陆框里的输入框里常常会看到提示你输入什么内容的字样颜色比较淡的,这个就是"文本框点击时文字消失,失去焦点时文字出现"这个效果:这个效果用个JS就可以完成,这个效果是做网站的人必备的JS代码:自己会写JS的写写也快,不会写的就需要代码收集以作备用,用到的时候就方便多了. 下面就是这个效果实现用到的JS代码: <script language="JavaScript" t

随机推荐