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 cookies 设置、读取、删除实例代码
Apr 12 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 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
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
详解php中反射的应用
2016/03/15 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
实例讲解php实现多线程
2019/01/27 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
浅谈Python 函数式编程
2020/06/20 Python
Lucene推荐的分页方式是什么?
2015/12/07 面试题
中专自我鉴定范文
2013/10/16 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
2014年保密工作总结
2014/11/22 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
详解Python中*args和**kwargs的使用
2022/04/07 Python
python语言中pandas字符串分割str.split()函数
2022/08/05 Python