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 相关文章推荐
在视频前插入广告
Nov 20 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
js同源策略详解
May 21 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
js制作支付倒计时页面
Oct 21 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
vue实现固定位置显示功能
May 30 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
js+audio实现音乐播放器
Sep 13 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 验证图片生成函数
2009/05/21 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
stripos函数知识点实例分享
2019/02/11 PHP
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
python基础教程之缩进介绍
2014/08/29 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
应届生个人求职信模板
2013/11/26 职场文书
服务行业个人求职的自我评价
2013/12/12 职场文书
超市采购员岗位职责
2014/02/01 职场文书
党在我心中演讲稿
2014/09/02 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
停车场管理制度范本
2015/08/05 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
JS ES6异步解决方案
2021/04/29 Javascript