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/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
JS实现购物车基本功能
Nov 08 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判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
twig里使用js变量的方法
2016/02/05 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
浅析return false的正确使用
2013/11/04 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
python读写json文件的简单实现
2017/04/11 Python
Python操作Jira库常用方法解析
2020/04/10 Python
python实现KNN近邻算法
2020/12/30 Python
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
会计自荐书
2013/12/02 职场文书
材料工程专业毕业生求职信
2014/03/04 职场文书
美容院合作经营协议书
2014/10/10 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
结婚保证书
2015/01/16 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript
MySQL派生表联表查询实战过程
2022/03/20 MySQL