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 实现模态对话框 源代码大全
May 02 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
vue文件树组件使用详解
Mar 29 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 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
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
js中的闭包学习心得
2018/02/06 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
python常见数制转换实例分析
2015/05/09 Python
wxPython之解决闪烁的问题
2018/01/15 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
解析python的局部变量和全局变量
2019/08/15 Python
Python内置类型性能分析过程实例
2020/01/29 Python
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
企业项目策划书
2014/01/11 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
建筑安全责任书范本
2014/07/24 职场文书
暑期培训班招生方案
2014/08/26 职场文书
公司租房协议书
2014/10/14 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
2015年化验室工作总结
2015/04/23 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
MySQL的join buffer原理
2021/04/29 MySQL
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers