从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 相关文章推荐
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
JS使用setInterval计时器实现挑战10秒
Nov 08 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中const与define的应用区别
2013/06/18 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
JavaScript如何实现防止重复的网络请求的示例
2021/01/28 Javascript
python创建和使用字典实例详解
2013/11/01 Python
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
介绍一些UNIX常用简单命令
2014/11/11 面试题
区域总监的岗位职责
2013/11/21 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
禁烟标语大全
2014/06/11 职场文书
大四毕业生自荐书
2014/07/05 职场文书
班级课外活动总结
2014/07/09 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android
Python软件包安装的三种常见方法
2022/07/07 Python