从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 相关文章推荐
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
Javascript的&&和||的另类用法
Jul 23 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
js 数组 fill() 填充方法
Nov 02 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的memory_limit限制的方法分享
2012/02/21 PHP
php适配器模式介绍
2012/08/14 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
java实现web实时消息推送的七种方案
2022/07/23 Java/Android