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的事件绑定的一些思考(补充)
Apr 20 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 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,ajax实现分页
2008/03/27 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
jQuery select的操作实现代码
2009/05/06 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
python使用turtle库与random库绘制雪花
2018/06/22 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
开工庆典邀请函范文
2014/01/16 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android