從jQuery.camelCase()學(xué)習(xí)string.replace() 函數(shù)學(xué)習(xí)
更新時(shí)間：2011年09月13日 22:54:02 作者：
camelCase函數(shù)的功能就是將形如background-color轉(zhuǎn)化為駝峰表示法：backgroundColor。
功能
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)，類似于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:匹配的字符串(類似$&)
p1,p2,...:此模式只有在replace()方法的第一個(gè)參數(shù)為RegExp，且正則表達(dá)式內(nèi)包含括號(hào)時(shí)有效。（類似$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");
camelCase函數(shù)的功能就是將形如background-color轉(zhuǎn)化為駝峰表示法：backgroundColor。
此函數(shù)在jQuery的data函數(shù)，以及涉及到css的諸多函數(shù)中都有用到。
jQuery的實(shí)現(xiàn)
復(fù)制代碼 代碼如下:
//正則匹配
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)，類似于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:匹配的字符串(類似$&)
p1,p2,...:此模式只有在replace()方法的第一個(gè)參數(shù)為RegExp，且正則表達(dá)式內(nèi)包含括號(hào)時(shí)有效。（類似$n / $nn）
offset:匹配子串的偏移量
s:用于搜索的字符串
獲取CSS屬性的駝峰表示
復(fù)制代碼 代碼如下:
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();
交換匹配字符串的位置
復(fù)制代碼 代碼如下:
var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var newstr = str.replace(re, "$2, $1");
相關(guān)文章
實(shí)用的JS正則表達(dá)式(手機(jī)號(hào)碼/IP正則/郵編正則/電話等)
實(shí)用的JS正則表達(dá)式(手機(jī)號(hào)碼/IP正則/郵編正則/電話等),經(jīng)驗(yàn)積累，感興趣的朋友可以了解下，一定會(huì)對(duì)你有幫助的2013-01-01
javascript實(shí)現(xiàn)將數(shù)字轉(zhuǎn)成千分位的方法小結(jié)【5種方式】
這篇文章主要介紹了javascript實(shí)現(xiàn)將數(shù)字轉(zhuǎn)成千分位的方法,結(jié)合實(shí)例形式分析了5種常用的數(shù)字轉(zhuǎn)換的常用方法,涉及字符串與正則操作的相關(guān)技巧,需要的朋友可以參考下2016-12-12
相信使用過(guò)jQuery的朋友都知道index()方法, 她可以很方便的幫你找到當(dāng)前元素在元素集合中索引位置. 那么, 原生JavaScript中如何獲取呢?2010-09-09
這篇文章主要給大家介紹了關(guān)于js原型鏈的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
當(dāng)頁(yè)面上存在一個(gè)圖片元素時(shí)如：<img src='xxxx' alt="" />,頁(yè)面加載中ie7、8跟chrome下圖片的onload事件非常奇怪，有后完全不觸發(fā)，有時(shí)候觸發(fā)后進(jìn)行改變某些元素的操作，操作結(jié)果無(wú)效。2011-07-07
uniapp如何實(shí)現(xiàn)tabBar之間傳參
這篇文章主要給大家介紹了關(guān)于uniapp如何實(shí)現(xiàn)tabBar之間傳參的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-08-08
很多情況下，需要用到隨機(jī)數(shù)，腳本之家特為大家整理了一些具體的使用與說(shuō)明。2010-08-08
這篇文章主要介紹了關(guān)于JS中的箭頭函數(shù),ES6中允許使用=>來(lái)定義函數(shù)。箭頭函數(shù)相當(dāng)于匿名函數(shù)，并簡(jiǎn)化了函數(shù)定義,箭頭函數(shù)在語(yǔ)法上比普通函數(shù)簡(jiǎn)潔多。箭頭函數(shù)就是采用箭頭=>來(lái)定義函數(shù)，省去關(guān)鍵字function,需要的朋友可以參考下2023-05-05
Avalonjs雙向數(shù)據(jù)綁定與監(jiān)聽(tīng)的實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了Avalonjs雙向數(shù)據(jù)綁定與監(jiān)聽(tīng)的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-06-06
javascript前端和后臺(tái)進(jìn)行數(shù)據(jù)交互方法示例
這篇文章主要介紹了javascript前端和后臺(tái)進(jìn)行數(shù)據(jù)交互方法示例，文章通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08