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 相关文章推荐
表格 隔行换色升级版
Nov 07 Javascript
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 Javascript
微信小程序实现授权登录
May 15 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 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
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
js实现下一页页码效果
2017/03/07 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
Django 外键的使用方法详解
2019/07/19 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
家长对孩子评语
2014/01/30 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
代领报检证委托书范本
2014/10/11 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
试用期辞职信范文
2015/03/02 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
php解析非标准json、非规范json的方式实例
2022/05/10 PHP