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 相关文章推荐
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
Javascript原型链及instanceof原理详解
May 25 Javascript
javascript实现文字跑马灯效果
Jun 18 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
解决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 错误处理经验分享
2011/10/11 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
php显示时间常用方法小结
2015/06/05 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
Django 内置权限扩展案例详解
2019/03/04 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
新郎新娘婚礼答谢词
2014/01/11 职场文书
高级工程师英文求职信
2014/03/19 职场文书
小露珠教学反思
2014/04/30 职场文书
土建施工员岗位职责
2015/04/11 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
html粘性页脚的具体使用
2022/01/18 HTML / CSS