js处理包含中文的字符串实例


Posted in Javascript onOctober 11, 2017

场景:

js中String类型自带的属性length获取的是字符串的字符数目,但是前端经常会需要限制字符串的显示长度,一个中文字符又大概占两个英文小写字符的显示位置,所以中英文混合的情况下用length值来判断显示长度往往并不正确。

常规的解决办法是遍历字符串,中文字符计长度2,非中文字符计长度1,通过新计算出来长度总和来限制字符串的显示长度。看代码↓↓↓

var Tools ={
 //是否包含中文
 hasZh: function(str){
  for(var i = 0;i < str.length; i++)
  {
   if(str.charCodeAt(i) > 255) //如果是汉字,则字符串长度加2
    return true;
   return false;
  }
 },
 //重新计算长度,中文+2,英文+1
 getlen: function(str){
  var strlen = 0;
  for(var i = 0;i < str.length; i++)
  {
   if(str.charCodeAt(i) > 255) //如果是汉字,则字符串长度加2
    strlen += 2;
   else
    strlen++;
  }
  return strlen;
 },
 //限制长度
 limitlen: function(str, len){
  var result = "";
  var strlen = 0;
  for(var i = 0;i < str.length; i++)
  {
   if(str.charCodeAt(i) > 255) //如果是汉字,则字符串长度加2
    strlen += 2;
   else
    strlen++;

   result += str.substr(i,1);

   if(strlen >= len){
    break;
   }
  }
  return result;
 }
}

这种方法的原理是根据中英文的unicode编码范围不同来判断的,中文占2个字节,英文占1个字节,所以中文的unicode编码值肯定大于2^8-1=255。

上述方法可以更严谨一点:就是考虑unicode编码范围,具体的范围可以戳Unicode Table

PS: 汉字的unicode编码范围16进制为4E00-9FA5,10进制则为:19968-40869,即判断中文的准确表达式为:

str.charCodeAt(i)>=19968 && str.charCodeAt(i)<=40869

插一句不太严谨的话,代码不用限制太严谨的范围,毕竟你不知道用户(测试)会输哪些奇怪的东西。

以上这篇js处理包含中文的字符串实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
json 定义
Jun 10 Javascript
javascript天然的迭代器
Oct 29 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 Javascript
解决JQuery全选/反选第二次失效的问题
Oct 11 #jQuery
React根据宽度自适应高度的示例代码
Oct 11 #Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 #Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 #Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 #Javascript
ionic选择多张图片上传的示例代码
Oct 10 #Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 #Javascript
You might like
深入php多态的实现详解
2013/06/09 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
基于Vue过渡状态实例讲解
2017/09/14 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
简单了解python的内存管理机制
2019/07/08 Python
Django中多种重定向方法使用详解
2019/07/17 Python
在django view中给form传入参数的例子
2019/07/19 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
详解Python 中的容器 collections
2020/08/17 Python
python爬虫 requests-html的使用
2020/11/30 Python
印度低票价航空公司:GoAir
2017/10/11 全球购物
物流专业求职计划书
2014/01/10 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
动员大会主持词
2014/03/20 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL