从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中length属性的探索
Jul 31 Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
vue实现全选和反选功能
Aug 31 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 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若干单维数组遍历方法的比较
2011/09/20 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
业务主管岗位职责范本
2013/12/25 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
公司演讲稿开场白
2014/08/25 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python