從jQuery.camelCase()學習string.replace() 函數(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的實現(xiàn)
//正則匹配
rdashAlpha = /-([a-z])/ig,
// camelCase替換字符串時的回調(diào)函數(shù)
fcamelCase = function( all, letter ) {
return letter.toUpperCase();
},
...
camelCase: function( string ) {
return string.replace( rdashAlpha, fcamelCase );
},
這個功能本身并不難，就是調(diào)用了String對象的replace方法。但是本著學習的態(tài)度還是研究了一下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()參數(shù)說明
regexp:一個用于搜索正則表達式
substr:一個用于搜素字符串
newSubStr:一個用于替換的新字符串
function:一個回調(diào)函數(shù)，函數(shù)的返回值用于替換原匹配的字符串
flags:非標準，類似于RegExp的i、g、m（忽略大小寫、是否全局搜索、匹配多行）
指定字符串作為替換對象
在用于替換的字符串中你可以使用以下模式:
$$ => 插入一個$
$& => 插入匹配的子串
$` =>插入匹配的子串之前的所有字符
$' => 插入匹配的子串之后的所有字符
$n / $nn => 此模式只有在replace()方法的第一個參數(shù)為RegExp，且正則表達式內(nèi)包含括號時有效。
指定函數(shù)作為替換對象
典型的replacement函數(shù)：function(str,p1,p2,offset,s){}
參數(shù)說明：
str:匹配的字符串(類似$&)
p1,p2,...:此模式只有在replace()方法的第一個參數(shù)為RegExp，且正則表達式內(nèi)包含括號時有效。（類似$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");
camelCase函數(shù)的功能就是將形如background-color轉(zhuǎn)化為駝峰表示法：backgroundColor。
此函數(shù)在jQuery的data函數(shù)，以及涉及到css的諸多函數(shù)中都有用到。
jQuery的實現(xiàn)
復制代碼 代碼如下:
//正則匹配
rdashAlpha = /-([a-z])/ig,
// camelCase替換字符串時的回調(diào)函數(shù)
fcamelCase = function( all, letter ) {
return letter.toUpperCase();
},
...
camelCase: function( string ) {
return string.replace( rdashAlpha, fcamelCase );
},
這個功能本身并不難，就是調(diào)用了String對象的replace方法。但是本著學習的態(tài)度還是研究了一下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()參數(shù)說明
regexp:一個用于搜索正則表達式
substr:一個用于搜素字符串
newSubStr:一個用于替換的新字符串
function:一個回調(diào)函數(shù)，函數(shù)的返回值用于替換原匹配的字符串
flags:非標準，類似于RegExp的i、g、m（忽略大小寫、是否全局搜索、匹配多行）
指定字符串作為替換對象
在用于替換的字符串中你可以使用以下模式:
$$ => 插入一個$
$& => 插入匹配的子串
$` =>插入匹配的子串之前的所有字符
$' => 插入匹配的子串之后的所有字符
$n / $nn => 此模式只有在replace()方法的第一個參數(shù)為RegExp，且正則表達式內(nèi)包含括號時有效。
指定函數(shù)作為替換對象
典型的replacement函數(shù)：function(str,p1,p2,offset,s){}
參數(shù)說明：
str:匹配的字符串(類似$&)
p1,p2,...:此模式只有在replace()方法的第一個參數(shù)為RegExp，且正則表達式內(nèi)包含括號時有效。（類似$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");
相關(guān)文章
實用的JS正則表達式(手機號碼/IP正則/郵編正則/電話等)
實用的JS正則表達式(手機號碼/IP正則/郵編正則/電話等),經(jīng)驗積累，感興趣的朋友可以了解下，一定會對你有幫助的2013-01-01
javascript實現(xiàn)將數(shù)字轉(zhuǎn)成千分位的方法小結(jié)【5種方式】
這篇文章主要介紹了javascript實現(xiàn)將數(shù)字轉(zhuǎn)成千分位的方法,結(jié)合實例形式分析了5種常用的數(shù)字轉(zhuǎn)換的常用方法,涉及字符串與正則操作的相關(guān)技巧,需要的朋友可以參考下2016-12-12
相信使用過jQuery的朋友都知道index()方法, 她可以很方便的幫你找到當前元素在元素集合中索引位置. 那么, 原生JavaScript中如何獲取呢?2010-09-09
這篇文章主要給大家介紹了關(guān)于js原型鏈的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
當頁面上存在一個圖片元素時如：<img src='xxxx' alt="" />,頁面加載中ie7、8跟chrome下圖片的onload事件非常奇怪，有后完全不觸發(fā)，有時候觸發(fā)后進行改變某些元素的操作，操作結(jié)果無效。2011-07-07
這篇文章主要給大家介紹了關(guān)于uniapp如何實現(xiàn)tabBar之間傳參的相關(guān)資料,文中通過代碼示例介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-08-08
很多情況下，需要用到隨機數(shù)，腳本之家特為大家整理了一些具體的使用與說明。2010-08-08
這篇文章主要介紹了關(guān)于JS中的箭頭函數(shù),ES6中允許使用=>來定義函數(shù)。箭頭函數(shù)相當于匿名函數(shù)，并簡化了函數(shù)定義,箭頭函數(shù)在語法上比普通函數(shù)簡潔多。箭頭函數(shù)就是采用箭頭=>來定義函數(shù)，省去關(guān)鍵字function,需要的朋友可以參考下2023-05-05
Avalonjs雙向數(shù)據(jù)綁定與監(jiān)聽的實例代碼
本文通過實例代碼給大家介紹了Avalonjs雙向數(shù)據(jù)綁定與監(jiān)聽的實現(xiàn)代碼，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-06-06
javascript前端和后臺進行數(shù)據(jù)交互方法示例
這篇文章主要介紹了javascript前端和后臺進行數(shù)據(jù)交互方法示例，文章通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08