JS实现字符串转驼峰格式的方法


Posted in Javascript onDecember 16, 2016

本文实例讲述了JS实现字符串转驼峰格式的方法。分享给大家供大家参考,具体如下:

实现效果如:border-bottom-color =>borderBottomColor

传传统方法

分析:

1.转大写,需要用到字符串的toUpperCase()方法

2.去掉-,需要用到字符串方法split(),这样就转成数组了,但数组中的每一个元素依然是字符串,所以可以用循环的方法取到第一个后面的元素

3.取第一个后面的元素的第一个字符,需要用到字符串的charAt()方法

4.第一个字符后面的字符,可以通过字符串截取方法substring()获得,这时把两个拼接再赋回给原数组。即完成了转换

5.用join()方法把数组的逗号去掉,拼接成字符串

var str="border-bottom-color";
function tf(){
  var arr=str.split("-");
  for(var i=1;i<arr.length;i++){
    arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substring(1);
  }
  return arr.join("");
};
tf(str);

正则的方法

分析:

1.正则为-字符,即var re=/-\w/g;匹配到-字符

2.用正则的replace()方法替换这个规范为去掉-以及字符大写,通过回调函数第一个参数直接转大写

var str="border-bottom-color";
function tf(){
  var re=/-(\w)/g;
  str=str.replace(re,function($0,$1){
    return $1.toUpperCase();
  });
  alert(str)
};
tf(str);

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js中获取事件对象的方法小结
Mar 13 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
微信小程序开发之转发分享功能
Oct 22 Javascript
详解js数组的完全随机排列算法
Dec 16 #Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 #Javascript
基于Vue如何封装分页组件
Dec 16 #Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 #Javascript
详解如何较好的使用js
Dec 16 #Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 #Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 #Javascript
You might like
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
用jquery.sortElements实现table排序
2014/05/04 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python读取键盘输入的2种方法
2015/06/16 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
python实现操作文件(文件夹)
2019/10/31 Python
python selenium循环登陆网站的实现
2019/11/04 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
计算机网络专业推荐信
2013/11/24 职场文书
上班看电影检讨书
2014/02/12 职场文书
先进个人申报材料
2014/12/30 职场文书
中层干部考核评语
2015/01/04 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
2015年国庆节标语大全
2015/07/30 职场文书