JS判断字符串字节数并截取长度的方法


Posted in Javascript onMarch 05, 2016

本文实例讲述了JS判断字符串字节数并截取长度的方法。分享给大家供大家参考,具体如下:

这是在项目制作中,积累到的一个东西,感觉效果还可以,现在贴上效果:

JS判断字符串字节数并截取长度的方法

那么,在页面上,我们需要检测两个东西,一个就是字节数,一个就是字符数。

由于数据库中,要求title的长度字节数为200,那么具体的js代码如下:

/*************************************************************************
* CodeBy:SCY CodeDate:2011年3月11日 12:01:16 
* DESC:主要是用来判断当前输入的字节数,以便做到限制输入标题的长度功能
**************************************************************************/
var matchWords;
function notifyTextLength() {
  var inputNum = document.getElementById("txtTitle").value.replace(/[^\x00-\xff]/g, "**").length; //得到输入的字节数
  if (inputNum <= 200) {
    matchWords = document.getElementById("txtTitle").value.length;
    document.getElementById("inputedWord").innerHTML = inputNum + "字节," + matchWords + "字符";
    document.getElementById("inputtingWord").innerHTML = (200 - inputNum) + "字母,"+(Math.round(((200-inputNum)/2)-0.5))+"汉字";
  }
  if (inputNum > 200) {
      document.getElementById("txtTitle").value = document.getElementById("txtTitle").value.substring(0, matchWords); //如果超过200字节,就截取到200字节
    }
}

其中,matchWords代表的是当字节数小于200的情况下,匹配的字符的个数;inputNum则是输入的字节数。

当标题输入的字节数大于200的时候,就按照字符个数进行截取。

html代码如下:

<input id="txtTitle" type="text" class="inputText" runat="server" onpropertychange="notifyTextLength();" />
当前已经输入<span id="inputedWord" style="color:red"></span>
还可以输入<span id="inputtingWord" style="color:Red;"></span>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS 判断undefined的实现代码
Nov 26 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 #Javascript
js控制TR的显示隐藏
Mar 04 #Javascript
Node.js操作Firebird数据库教程
Mar 04 #Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 #Javascript
node.js微信公众平台开发教程
Mar 04 #Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 #Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 #Javascript
You might like
浅析PHP水印技术
2007/02/14 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
javascript 全等号运算符使用说明
2010/05/31 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
JS获取时间的方法
2015/01/21 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
利用python实现数据分析
2017/01/11 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
Django model update的多种用法介绍
2020/03/28 Python
Numpy之reshape()使用详解
2019/12/26 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
python 通过文件夹导入包的操作
2020/06/01 Python
python Tornado框架的使用示例
2020/10/19 Python
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
Servlet面试题库
2015/07/18 面试题
毕业实习自我鉴定范文2014
2014/09/26 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
借条格式范本
2015/05/25 职场文书
国际贸易实训总结
2015/08/03 职场文书