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中Eval函数的使用
Mar 23 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
webpack分离css单独打包的方法
Jun 12 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 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
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
python处理圆角图片、圆形图片的例子
2014/04/25 Python
Python实现的桶排序算法示例
2017/11/29 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
关于Django Models CharField 参数说明
2020/03/31 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
大专生自我鉴定范文
2013/10/01 职场文书
历史学专业推荐信
2013/11/06 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
企业军训感言
2014/02/08 职场文书
总经理任命书范本
2014/06/05 职场文书
政风行风评议工作总结
2014/10/21 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
Oracle 触发器trigger使用案例
2022/02/24 Oracle