从jQuery.camelCase()学习string.replace() 函数学习


Posted in Javascript onSeptember 13, 2011

功能
camelCase函数的功能就是将形如background-color转化为驼峰表示法:backgroundColor。
此函数在jQuery的data函数,以及涉及到css的诸多函数中都有用到。

jQuery的实现

//正则匹配 
rdashAlpha = /-([a-z])/ig, 
// camelCase替换字符串时的回调函数 
fcamelCase = function( all, letter ) { 
return letter.toUpperCase(); 
}, 
... 
camelCase: function( string ) { 
return string.replace( rdashAlpha, fcamelCase ); 
},

这个功能本身并不难,就是调用了String对象的replace方法。但是本着学习的态度还是研究了一下replace方法。
资料参考:https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/replace

String.replace()语法
str.replace(regexp|substr, newSubStr|function[, Non-standard flags]);

String.replace()参数说明
regexp:一个用于搜索正则表达式
substr:一个用于搜素字符串
newSubStr:一个用于替换的新字符串
function:一个回调函数,函数的返回值用于替换原匹配的字符串
flags:非标准,类似于RegExp的i、g、m(忽略大小写、是否全局搜索、匹配多行)

指定字符串作为替换对象
在用于替换的字符串中你可以使用以下模式:
$$ => 插入一个$
$& => 插入匹配的子串
$` =>插入匹配的子串之前的所有字符
$' => 插入匹配的子串之后的所有字符
$n / $nn => 此模式只有在replace()方法的第一个参数为RegExp,且正则表达式内包含括号时有效。

指定函数作为替换对象
典型的replacement函数:function(str,p1,p2,offset,s){}
参数说明:
str:匹配的字符串(类似$&)
p1,p2,...:此模式只有在replace()方法的第一个参数为RegExp,且正则表达式内包含括号时有效。(类似$n / $nn)
offset:匹配子串的偏移量
s:用于搜索的字符串

获取CSS属性的驼峰表示

String.prototype.camelCase=function(){ 
//all为匹配的子串,而letter则为p1,因为[a-z]加入了括号 
return this.replace(/-([a-z])/ig,function( all, letter,offset,s ) { 
return letter.toUpperCase(); 
}); 
}; 
var cssText = 'h2\n{\n border-bottom:1px solid #eee;\n background-color:#bbb;\n}'; 
var newstr = cssText.camelCase();

交换匹配字符串的位置
var re = /(\w+)\s(\w+)/; 
var str = "John Smith"; 
var newstr = str.replace(re, "$2, $1");
Javascript 相关文章推荐
js文件中调用js的实现方法小结
Oct 23 Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
vue中的scope使用详解
Oct 29 Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 Javascript
各情景下元素宽高的获取实现代码
Sep 13 #Javascript
JS字符串函数扩展代码
Sep 13 #Javascript
Javascript学习笔记 delete运算符
Sep 13 #Javascript
Webkit的跨域安全问题说明
Sep 13 #Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 #Javascript
容易被忽略的JS脚本特性
Sep 13 #Javascript
Javascript学习笔记-详解in运算符
Sep 13 #Javascript
You might like
用libtemplate实现静态网页生成
2006/10/09 PHP
php实现天干地支计算器示例
2014/03/14 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
两个Javascript小tip资料
2010/11/23 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
Python的装饰器用法学习笔记
2016/06/24 Python
Python切片操作实例分析
2018/03/16 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
化工专业个人的求职信范文
2013/11/28 职场文书
商场经理竞聘演讲稿
2014/01/01 职场文书
舞蹈专业求职信
2014/06/13 职场文书
宣传标语大全
2014/07/01 职场文书
2014年保卫工作总结
2014/12/05 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
同学会演讲稿
2019/04/02 职场文书