从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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
JavaScript几种形式的树结构菜单
May 10 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
jQuery实现验证码功能
Mar 17 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
js实现简单数字变动效果
Nov 06 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导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
JavaScript_object基础入门(必看篇)
2016/06/13 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
Python+MongoDB自增键值的简单实现
2016/11/04 Python
Python中一行和多行import模块问题
2018/04/01 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
高级文秘工作总结的自我评价
2013/09/28 职场文书
技术总监管理职责范本
2014/03/06 职场文书
企业精神口号
2014/06/11 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
Python中的pprint模块
2021/11/27 Python
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python