從jQuery.camelCase()學(xué)習(xí)string.replace() 函數(shù)學(xué)習(xí)
camelCase函數(shù)的功能就是將形如background-color轉(zhuǎn)化為駝峰表示法:backgroundColor。
此函數(shù)在jQuery的data函數(shù),以及涉及到css的諸多函數(shù)中都有用到。
jQuery的實(shí)現(xiàn)
//正則匹配
rdashAlpha = /-([a-z])/ig,
// camelCase替換字符串時(shí)的回調(diào)函數(shù)
fcamelCase = function( all, letter ) {
return letter.toUpperCase();
},
...
camelCase: function( string ) {
return string.replace( rdashAlpha, fcamelCase );
},
這個(gè)功能本身并不難,就是調(diào)用了String對(duì)象的replace方法。但是本著學(xué)習(xí)的態(tài)度還是研究了一下replace方法。
資料參考:https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/replace
String.replace()語(yǔ)法
str.replace(regexp|substr, newSubStr|function[, Non-standard flags]);
String.replace()參數(shù)說(shuō)明
regexp:一個(gè)用于搜索正則表達(dá)式
substr:一個(gè)用于搜素字符串
newSubStr:一個(gè)用于替換的新字符串
function:一個(gè)回調(diào)函數(shù),函數(shù)的返回值用于替換原匹配的字符串
flags:非標(biāo)準(zhǔn),類(lèi)似于RegExp的i、g、m(忽略大小寫(xiě)、是否全局搜索、匹配多行)
指定字符串作為替換對(duì)象
在用于替換的字符串中你可以使用以下模式:
$$ => 插入一個(gè)$
$& => 插入匹配的子串
$` =>插入匹配的子串之前的所有字符
$' => 插入匹配的子串之后的所有字符
$n / $nn => 此模式只有在replace()方法的第一個(gè)參數(shù)為RegExp,且正則表達(dá)式內(nèi)包含括號(hào)時(shí)有效。
指定函數(shù)作為替換對(duì)象
典型的replacement函數(shù):function(str,p1,p2,offset,s){}
參數(shù)說(shuō)明:
str:匹配的字符串(類(lèi)似$&)
p1,p2,...:此模式只有在replace()方法的第一個(gè)參數(shù)為RegExp,且正則表達(dá)式內(nèi)包含括號(hào)時(shí)有效。(類(lèi)似$n / $nn)
offset:匹配子串的偏移量
s:用于搜索的字符串
獲取CSS屬性的駝峰表示
String.prototype.camelCase=function(){
//all為匹配的子串,而letter則為p1,因?yàn)閇a-z]加入了括號(hào)
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");
相關(guān)文章
基于javascript實(shí)現(xiàn)的購(gòu)物商城商品倒計(jì)時(shí)實(shí)例
本文主要介紹了基于javascript實(shí)現(xiàn)的購(gòu)物商城商品倒計(jì)時(shí)實(shí)例,代碼詳細(xì),可直接復(fù)制試試看效果。需要的朋友可以參考借鑒2016-12-12JavaScript重定向URL參數(shù)的兩種方法小結(jié)
關(guān)于JavaScript重定向URL參數(shù)的實(shí)現(xiàn)方法網(wǎng)站有很多,這篇文章的主要內(nèi)容是從網(wǎng)上查找,并進(jìn)行了修改,簡(jiǎn)單粗暴的實(shí)現(xiàn)使用JavaScript重置url參數(shù),文中給出了詳細(xì)的示例代碼和調(diào)用代碼,對(duì)大家的理解和學(xué)習(xí)很有幫助,感興趣的朋友們下面來(lái)一起看看吧。2016-10-10有趣的JavaScript數(shù)組長(zhǎng)度問(wèn)題代碼說(shuō)明
有趣的JavaScript數(shù)組代碼示例,學(xué)習(xí)js的朋友可以參考下。注意以下的情況。2011-01-01詳解vue-cli+es6引入es5寫(xiě)的js(兩種方法)
本文通過(guò)兩種方法給大家介紹vue-cli+es6引入es5寫(xiě)的js,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2019-04-04javascript類(lèi)型系統(tǒng) Window對(duì)象學(xué)習(xí)筆記
這篇文章主要介紹了javascript類(lèi)型系統(tǒng)之Window對(duì)象,整理關(guān)于Window對(duì)象的學(xué)習(xí)筆記,感興趣的小伙伴們可以參考一下2016-01-01你必須知道的Javascript知識(shí)點(diǎn)之"字面量和對(duì)應(yīng)類(lèi)型"說(shuō)明介紹
本篇文章小編為大家介紹,你必須知道的Javascript知識(shí)點(diǎn)之"字面量和對(duì)應(yīng)類(lèi)型"。需要的朋友參考下2013-04-04在Google 地圖上實(shí)現(xiàn)做的標(biāo)記相連接
這篇文章主要介紹了在Google 地圖上實(shí)現(xiàn)做的標(biāo)記相連接,需要的朋友可以參考下2015-01-01微信小程序圖片輪播組件gallery slider使用方法詳解
這篇文章主要為大家詳細(xì)介紹了微信小程序圖片輪播組件gallery slider的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01小程序統(tǒng)計(jì)來(lái)源信息的方案與具體代碼
微信小程序數(shù)據(jù)統(tǒng)計(jì),現(xiàn)在有很多的統(tǒng)計(jì)方法和統(tǒng)計(jì)工具,下面這篇文章主要給大家介紹了關(guān)于小程序統(tǒng)計(jì)來(lái)源信息的方案與具體代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09