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和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 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
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
一个更简单的无限级分类菜单代码
2007/01/16 PHP
封装一个PDO数据库操作类代码
2009/09/09 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
php在文件指定行中写入代码的方法
2012/05/23 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
关于php中一些字符串总结
2016/05/05 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
JavaScript Konami Code 实现代码
2009/07/29 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
vue自定义指令directive的使用方法
2019/04/07 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
Python中获取网页状态码的两个方法
2014/11/03 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
医院后勤自我鉴定
2013/10/13 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
教师党员个人自我评价
2015/03/04 职场文书
校车安全管理责任书
2015/05/11 职场文书
分享Python异步爬取知乎热榜
2022/04/12 Python