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 相关文章推荐
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
最简单的tab切换实例代码
May 13 Javascript
Javascript之Date对象详解
Jun 07 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 Javascript
微信小程序canvas实现签名功能
Jan 19 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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
javascript数组使用调用方法汇总
2007/12/08 Javascript
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
JavaScript 密码强度判断代码
2009/09/05 Javascript
javascript replace()正则替换实现代码
2010/02/26 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
迟到检讨书5000字
2014/01/31 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
2014年学校工作总结
2014/11/20 职场文书
交通事故起诉书
2015/05/19 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
前端JavaScript大管家 package.json
2021/11/02 Javascript