从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 相关文章推荐
Jquery 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
js 居中漂浮广告
Mar 21 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
Nuxt.js实战详解
Jan 18 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 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
PHP脚本的10个技巧(8)
2006/10/09 PHP
一个颜色轮换的简单例子
2006/10/09 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
python实现查询IP地址所在地
2015/03/29 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
django之使用celery-把耗时程序放到celery里面执行的方法
2019/07/12 Python
python如何保证输入键入数字的方法
2019/08/23 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
如何在 Django 模板中输出 "{{"
2020/01/24 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
linux面试题参考答案(5)
2016/11/05 面试题
公司清洁工岗位职责
2013/12/14 职场文书
产品发布会策划方案
2014/05/12 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
机关作风建设心得体会
2014/10/22 职场文书
2014年售票员工作总结
2014/11/19 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS