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 相关文章推荐
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 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生成静态页面详解
2006/11/19 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
JQuery live函数
2010/12/24 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
Python的函数嵌套的使用方法
2014/01/24 Python
Python如何实现文本转语音
2016/08/08 Python
Python性能提升之延迟初始化
2016/12/04 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
python 获取图片分辨率的方法
2019/01/08 Python
Python之循环结构
2019/01/15 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
护士在校生自荐信
2014/02/01 职场文书
数学检讨书1000字
2014/02/24 职场文书
安全演讲稿开场白
2014/08/25 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
行风评议整改报告
2014/11/06 职场文书