从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 相关文章推荐
javascript instanceof 与typeof使用说明
Jan 11 Javascript
jquery获取input表单值的代码
Apr 19 Javascript
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
Nov 19 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
js日期相关函数总结分享
Oct 15 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
vue使用canvas实现移动端手写签名
Sep 22 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
各情景下元素宽高的获取实现代码
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安全编程之加密功能
2006/10/09 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
js验证表单大全
2006/11/25 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
Python实现字典的key和values的交换
2015/08/04 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
python中的colorlog库使用详解
2019/07/05 Python
关于python中密码加盐的学习体会小结
2019/07/15 Python
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
酒店管理自荐信
2013/10/23 职场文书
主持人演讲稿范文
2013/12/28 职场文书
生产部管理制度
2014/01/31 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
小学毕业教师寄语
2019/06/21 职场文书
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers