从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 相关文章推荐
自己开发Dojo的建议框架
Sep 24 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
网站接入QQ登录的两种方法
Jul 22 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
Angular2自定义分页组件
Apr 19 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
vue 实现tab切换保持数据状态
Jul 21 Javascript
JSON stringify方法原理及实例解析
Oct 23 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 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
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
跟老齐学Python之数据类型总结
2014/09/24 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
python自动12306抢票软件实现代码
2018/02/24 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
python多线程使用方法实例详解
2019/12/30 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
一位农村小子的自荐信
2014/04/07 职场文书
python requests模块的使用示例
2021/04/07 Python
openstack云计算keystone组件工作介绍
2022/04/20 Servers
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers