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控制表格隔行变色
Jun 26 Javascript
简单实用的js调试logger组件实现代码
Nov 20 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
JS检测图片大小的实例
Aug 21 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
js图片上传的封装代码
Aug 01 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
JSONObject与JSONArray使用方法解析
Sep 28 Javascript
node中使用shell脚本的方法步骤
Mar 23 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判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
跟老齐学Python之类的细节
2014/10/13 Python
python实现用于测试网站访问速率的方法
2015/05/26 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
python3 下载网络图片代码实例
2019/08/27 Python
Django异步任务线程池实现原理
2019/12/17 Python
学习Python爬虫的几点建议
2020/08/05 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
我们是伦敦女孩:WalG
2018/01/08 全球购物
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
戴森英国官网:Dyson英国
2019/05/07 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
上班看电影检讨书
2014/02/12 职场文书
超市促销活动总结
2014/07/01 职场文书
优秀纪检干部材料
2014/08/27 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
个人先进材料范文
2014/12/30 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android