在显示字符串的时候，避免字符串过长往往会对字符串进行截取操作，通常会用到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. Delphi编程中使用回车键不换行处理方法！！

    我以前遇到过Delphi编程中使用回车键不换行的问题,一直没有找到正确处理方法,以至于每次都重新安装Delphi,今天在XE8中再次遇到这样问题,万幸找到了正确的解决方法: 可能使用过程中不小心按了i ...

  2. JComboBox组件的列表实时更新

    JComboBox deleteUser = new JComboBox(queryUser()); //queryUser()的返回值为字符串数组 deleteUser.setModel(new D ...

  3. Python 的web自动化测试

    安装selenium 上面python已安装完毕,接下来安装selenium. 安装selenium之前需安装些必要工具 1. 安装setuptools 下载地址:https://pypi.pytho ...

  4. 爬虫开发8.scrapy框架之持久化操作

    今日概要 基于终端指令的持久化存储 基于管道的持久化存储 今日详情 1.基于终端指令的持久化存储 保证爬虫文件的parse方法中有可迭代类型对象(通常为列表or字典)的返回,该返回值可以通过终端指令的 ...

  5. scrapy下载中间件,UA池和代理池

    一.下载中间件 框架图: 下载中间件(Downloader Middlewares) 位于scrapy引擎和下载器之间的一层组件. - 作用: (1)引擎将请求传递给下载器过程中, 下载中间件可以对请 ...

  6. php运行环境学习

    web服务器,负责响应客户端请求.对于静态页面请求,会立即返回相应页面给客户端:如果是动态页面,web服务器会根据 httpd.conf中的AddType配置,提交给合适的动态脚本解析程序预处理,然后 ...

  7. Ionic开发Hybrid App问题总结

    http://ionichina.com/topic/5641b891b903cba630e25f10 http://www.cnblogs.com/parry/p/issues_about_buil ...

  8. struts2的优缺点

    Struts2框架10个优点:1.可以用任何POJO(存粹的java类)来接收表单输入.可以把POJO视为一个Action类 Action类:获得Form表单数据,并处理逻辑的类: DAO类:进行数据 ...

  9. Hacking Lambda Expressions in Java

    Hacking Lambda Expressions in Javahttps://dzone.com/articles/hacking-lambda-expressions-in-java At t ...

  10. mybatis的CRUD实例(四)

    接下来我们来实现新增用户功能: 一.新增用户 这里我们使用的sql为:insert into user(username,birthday,sex,address) values ("lwj ...