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 相关文章推荐
javascript 可以拖动的DIV(二)
Jun 26 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
关于使用js算总价的问题
Jun 23 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 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数据库连接类~~做成一个分页类!
2006/11/25 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
JavaScript的public、private和privileged模式
2009/12/28 Javascript
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
javascript常用的方法整理
2015/08/20 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
python 中的divmod数字处理函数浅析
2017/10/17 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
面向对象编程OOP的优点
2013/01/22 面试题
会展中心部门工作职责
2013/11/27 职场文书
校友会欢迎辞
2014/01/13 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
MySQL事务的隔离级别详情
2022/07/15 MySQL