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 相关文章推荐
Javascript 遍历对象中的子对象
Jul 03 Javascript
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
jquery 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
vue实现Input输入框模糊查询方法
Jan 29 Javascript
vue-router为激活的路由设置样式操作
Jul 18 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性能优化的介绍
2013/06/20 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
jQuery技巧总结
2011/01/01 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
浅谈vue加载优化策略
2019/03/19 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
ptyhon实现sitemap生成示例
2014/03/30 Python
Python获取文件ssdeep值的方法
2014/10/05 Python
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
python操作gitlab API过程解析
2019/12/27 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
python输入中文的实例方法
2020/09/14 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
土木工程毕业生自荐信
2013/09/21 职场文书
留学自荐信
2013/10/10 职场文书
单位未婚证明范本
2014/01/18 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
三八妇女节致辞
2015/07/31 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书