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 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
javascript 面向对象,实现namespace,class,继承,重载
Oct 29 Javascript
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
script标签属性type与language使用选择
Dec 02 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
js 性能优化之快速响应的用户界面
Feb 15 Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 Javascript
vue组件name的作用小结
May 23 Javascript
JS实现网站吸顶条
Jan 08 Javascript
Vue组件基础用法详解
Feb 05 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 Javascript
js基础语法与maven项目配置教程案例
Jul 15 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
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
层叠菜单的动态生成
2006/10/09 PHP
php通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
python实现倒计时的示例
2014/02/14 Python
Python中的魔法方法深入理解
2014/07/09 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
PyQt5实现下载进度条效果
2018/04/19 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
详解Python流程控制语句
2020/10/28 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
服装厂厂长职责
2013/12/16 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
心理健康活动总结
2014/04/30 职场文书
2015年度企业工作总结
2015/05/21 职场文书
2016国培学习心得体会
2016/01/08 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
pandas数值排序的实现实例
2021/07/25 Python