从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获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 Javascript
如何提高javascript加载速度
Dec 26 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
js判断两个数组相等的5种方法
May 06 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生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
清空上传控件input file的值
2010/07/03 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
DOM 高级编程
2015/05/06 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
python散点图实例之随机漫步
2018/08/27 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
Python语言进阶知识点总结
2019/05/28 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
python文字转语音实现过程解析
2019/11/12 Python
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
Oracle性能调优原则
2012/05/03 面试题
关于Assembly命名空间的三个面试题
2015/07/23 面试题
电气自动化专业职业规划范文
2014/02/16 职场文书
交通事故协议书
2014/04/15 职场文书
介绍信如何写
2015/01/31 职场文书
大学生党课感想
2015/08/11 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书