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 相关文章推荐
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
JSON 数据格式详解
Sep 13 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
JS查找孩子节点简单示例
Jul 25 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 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中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
PHP调用其他文件中的类
2018/04/02 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
基于Django用户认证系统详解
2018/02/21 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
python requests库的使用
2021/01/06 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
比较基础的php面试题及答案-填空题
2014/04/26 面试题
会计与审计专业大专生求职信
2013/10/03 职场文书
会计专业求职信范文
2014/03/16 职场文书
结婚保证书范文
2014/04/29 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书