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 相关文章推荐
使用时间戳解决ie缓存的问题
Aug 20 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
Javascript自定义事件详解
Jan 13 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
详解Vue整合axios的实例代码
Jun 21 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 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分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
tornado捕获和处理404错误的方法
2014/02/26 Python
Django权限机制实现代码详解
2018/02/05 Python
python执行精确的小数计算方法
2019/01/21 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
Python 远程开关机的方法
2020/11/18 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
全国文明单位申报材料
2014/05/31 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
社会工作专业求职信
2014/07/15 职场文书
员工2014年度工作总结
2014/12/09 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
Python代码实现双链表
2022/05/25 Python