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 相关文章推荐
js倒计时小程序
Nov 05 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
安装vue-cli的简易过程
May 22 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
ES6中Promise的使用方法实例总结
Feb 18 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
python实现的生成word文档功能示例
2019/08/23 Python
使用python实现对元素的长截图功能
2019/11/14 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
Python读取yaml文件的详细教程
2020/07/21 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
麦当劳辞职信范文
2014/01/18 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
休假证明书
2015/06/24 职场文书
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
Java实现房屋出租系统详解
2021/10/05 Java/Android