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入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
js实现简单的计算器功能
Jan 16 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
详解vue中axios的封装
Jul 18 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 Javascript
Vue路由模块化配置的完整步骤
Aug 14 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
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
Python验证码识别处理实例
2015/12/28 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
python实现共轭梯度法
2019/07/03 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
学生的自我鉴定范文
2013/10/24 职场文书
超市活动计划书
2014/04/24 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书