https://blog.csdn.net/s8460049/article/details/51852259
先復習一下正則表達式，正則表達式基礎知識
//星號(*) : 星號代表匹配它前面一個字符任意遍(0或任意次)
//加號(+): 加號是一個與星號(*)類似的通配符，它也是數(shù)量詞，表示匹配前面的字符一次或多次（至少一次).
//加號與星號的差別就在這里，星號可以匹配0次，加號則必須一次以上。
//問號(?): 問號也是一個數(shù)量詞，它代表匹配前一個字符0或1次。
//中括號[]： 中括號用來表示一個字符集合，
//如果這個集合有很多元素，如26個字母，數(shù)字等，一個個地寫在中括號里，未免太麻煩太蠢笨，
//這時可以用連字符(hyphen)來表示一個范圍，
// 如:[a-z]表示小寫字母的集合，
// [a-zA-Z]表示大小寫字母的集合。
// 脫字符^ (caret). // 這種寫法表示，匹配任何不在該集合中的字符，與上面的用法剛好相反
//特殊字符： // \w -- (小寫w) 表示字母或數(shù)字，等價于 [a-zA-Z0-9]
// \W -- (大寫W)非字母且非數(shù)字，與\w相反 等價于 '[^A-Za-z0-9_]'
// \s -- (小寫s)匹配一個空格字符，包括：空格，換行，回車,tab,等價于[ \n\r\t\f]
// \S -- (大寫S)匹配非空格字符，\s的相反 等價于 [^ \f\n\r\t\v]。
// \d -- 表示10進制數(shù)字，等價于 [0-9]
// \D -- 匹配一個非數(shù)字字符。等價于 [^0-9]。
// \f 匹配一個換頁符。等價于 \x0c 和 \cL。
// \n 匹配一個換行符。等價于 \x0a 和 \cJ。
// \r 匹配一個回車符。等價于 \x0d 和 \cM。
// \t 匹配一個制表符。等價于 \x09 和 \cI。
// \v 匹配一個垂直制表符。等價于 \x0b 和 \cK。
// 大括號:{} // 大括號的作用是指定重復前面一個字符多少遍:
// {N} 重復N遍
// {n,m} 重復 n~m 遍
// {n,} 至少重復n遍
// {,m} 至多重復m遍
//定位符 ^ 匹配輸入字符串的開始位置。
//定位符 $ 匹配輸入字符串的結束位置。
// \b 匹配一個單詞邊界，也就是指單詞和空格間的位置。
//例如， 'er\b' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。 // \B 和\b相反，匹配非單詞邊界。'er\B' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。
這個東西，一般也背不下來，只要忘記的時候，知道怎么查就可以，有個思路
函數(shù)的用法實例
<script> /**************************************************************
* * * replace用法1 - 基礎用法 最核心的易錯點：如果要替換全部匹配項，
需要傳入一個 RegExp 對象并指定其 global 屬性。
*******************************************************/
console.log('replace基本用法')
//基本用法： myString = "javascript is a good script language";
//在此我想將字母a替換成字母A console.log("大小寫單獨替換："+myString.replace("a","A"));
// 我想大家運行后可以看到結果，它只替換了找到的第一個字符，如果想替換多個字符怎么辦？
// 答案：結合正則表達式，這也是replace的核心用法之一！
//將字母a替換成字母A 錯誤的寫法 少了/g myString = "javascript is a good script language";
console.log("全局替換少了/g："+myString.replace(/a/,"A"));
//console.log(myString.replace(new RegExp('a','gm'),"A")); //將字母a替換成字母A 正確的寫法 /g表示匹配所有 myString = "javascript is a good script language"; console.log("全局替換："+myString.replace(/a/g,"A"));
/******************************************************************************
replace用法2 - 高級用法 特殊標記$ *******************************************************************************/
//replace高級技巧 - 特殊標記$ console.log('replace功能4 - 特殊標記$') // 對于正則replace約定了一個特殊標記符$：
// 1.$i (i:1-99) : 表示從左到右正則子表達式所匹配的文本。
// 2.$&:表示與正則表達式匹配的全文本。
// 3.$`(`:切換技能鍵)：表示匹配字符串的左邊文本。
// 4.$'(‘:單引號)：表示匹配字符串的右邊文本'。
// 5.$$：表示$轉(zhuǎn)移。
// $i (i:1-99) : 表示從左到右正則子表達式所匹配的文本
//案例1- 匹配后替換
console.log('replace功能1 - 匹配后替換')
//在本例中，我們將把所有的花引號替換為直引號：
myString = '"a", "b"';
myString = myString.replace(/"([^"]*)"/g, "'$1'");
//匹配"任何非引號字符"，然后替換成'任何非引號字符'里面 console.log(myString)
//案例2- 匹配后替換
myString= "javascript is a good script language";
console.log("只替換匹配部分:"+myString.replace(/(javascript)\s*(is)/g,"$1 $2 fun. it $2"));
//匹配javascript 0個或者多個空格 is ，然后替換成 javascript is fun. it is，
//注意，這里只替換掉了匹配的部分，后面a good script language不再匹配部分里
//案例3 - 分組匹配后顛倒 console.log('replace功能2 - 顛倒')
//在本例中，我們將把 "itcast,cn" 轉(zhuǎn)換為 "cn itcast" 的形式：
myString = "itcast , cn";
myString = myString.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1");
//這里正則匹配了itcast , cn整個串，然后根據(jù)（）標記 console.log(myString)
//案例4 - 分組匹配后顛倒
myString = "boy & girl";
myString.replace(/(\w+)\s*&\s*(\w+)/g,"$2 & $1") //girl & boy console.log(myString)
// $&:表示與正則表達式匹配的全文本。
myString = "boy";
myString.replace(/\w+/g,"$&-$&") // boy-boy
console.log(myString)
// $`(`:切換技能鍵)：表示匹配字符串的左邊文本。
myString = "javascript";
myString.replace(/script/,"$& != $`") //javascript != java console.log(myString)
// $'(‘:單引號)：表示匹配字符串的右邊文本。
myString = "javascript";
myString.replace(/java/,"$$&' is ") // javascript is script console.log(myString) /*************************************************************
***************** replace用法2 - 高級用法 第二個參數(shù)可以是函數(shù) - 最常用 **************************************************************************
*****/
//無敵的函數(shù) - replace第二個參數(shù)可以傳遞函數(shù)
//如果第二參數(shù)是一個函數(shù)的話，那么函數(shù)的參數(shù)是什么呢？并且這個函數(shù)的執(zhí)行次數(shù)，與正則表達式在整個串匹配的次數(shù)相同，
console.log('replace功能5 - 無敵的函數(shù) - replace第二個參數(shù)可以傳遞函數(shù)')
myString = "abbabc";
myString.replace(/(a)(b)/g, function(){
console.log("sunlandong")
console.log(arguments) // 輸出結果["ab", "a", "b", 2, "bbabc"]
});
// 參數(shù)將依次為：
// 1、整個正則表達式匹配的字符。
// 2、第一分組匹配的內(nèi)容、第二分組匹配的內(nèi)容…… 以此類推直到最后一個分組。
// 3、此次匹配在源自符串中的下標（位置）。
// 4、源自符串 // 所以例子的輸出是 ["ab", "a", "b", 2, "bbabc"] //
函數(shù)執(zhí)行的次數(shù)，就是正則在整個字符串匹配的次數(shù)
//用法舉例 首字母大寫 -- 一個參數(shù) 表示匹配的整個字符串 console.log('replace功能3 - 將首字符轉(zhuǎn)為大寫')
//在本例中，我們將把字符串中所有單詞的首字母都轉(zhuǎn)換為大寫：\b匹配一個單詞邊界
myString = 'aaa bbb ccc';
myString=myString.replace(/\b\w+\b/g, function(word){
console.log("匹配的東西"+word);
return word.substring(0,1).toUpperCase()+word.substring(1);
} );
console.log(myString)
//用法舉例 首字母大寫 -- 多個參數(shù) - 第一個表示匹配的整個字符串，后面的表示分組中的內(nèi)容 /* 字符^ 意義：表示匹配的字符必須在最前邊。
例如：/^A/不匹配"an A,"中的'A'，但匹配"An A."中最前面的'A'。
字符$ 意義：與^類似，匹配最末的字符。
例如：/t$/不匹配"eater"中的't'，但匹配"eat"中的't'。
\s匹配任何不可見字符，包括空格、制表符、換頁符等等。
等價于[ \f\n\r\t\v]。
| 表示或者運算*/
function capitalize(str){
return str.replace( /(^|\s)([a-z])/g , function(m,p1,p2){
console.log("匹配的東西"+m);
console.log("匹配的東西第一個"+p1);
console.log("匹配的東西第二個"+p2);
return p1+p2.toUpperCase();//匹配結果 am a boy } );
};
myString = "i am a boy !"
console.log(capitalize(myString)) //I Am A Boy！<script>
利用replace，使用模板方法，做數(shù)據(jù)綁定
OK，了解了上面的東西之后，
下面就來實際應用一把，只是舉例應用，
并不是要真的寫一個模板，希望大家舉一反三
//簡單的數(shù)據(jù)綁定formateString
formateString: function(str, data) {
return str.replace(/@\((\w+)\)/g, function(match, key){
return typeof data[key] === "undefined" ? '' : data[key] ;
}
}
先貼出方法，幾行代碼也不難，意思也很簡單，
就是匹配@(任意字符)，然后將其替換為參數(shù)data中相應的數(shù)據(jù)
看一下一個完整例子額
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head> <body> <div id="mydiv"> <strong> 用戶名字： </strong> @(name) <br> <strong style = 'color:green'> 地址: </strong> @(address) <br> <strong style = 'color:yello'> 性別: </strong> @(sex) </div> <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="js/satisfy.js" ></script> <script id="mytemplate" type="text/javascript"> </script> <script type="text/javascript"> var user = { name: "sunland", address: "北京海淀", sex: "男" } document.getElementById("mydiv").innerHTML=formateString(document.getElementById("mydiv").innerHTML,user); <!-- 上面就是一個完整的簡單用法， 實際應用中的話，大部分應該都是這樣的情況，html的dom節(jié)點可能都是動態(tài)生成的， ajax請求時候，服務器返回相應的data，我們甚至要遍歷data，然后循環(huán)多次生成多個dom節(jié)點，添加到頁面，但是差不多也是這個用法 var data = [{ name: "sunland", address: "北京海淀", sex: "男" }, { name: "sunland", address: "北京海淀", sex: "男" }, { name: "sunland", address: "北京海淀", sex: "男" }, { name: "sunland", address: "北京海淀", sex: "男" }] data為服務器返回數(shù)據(jù) 而這個時候，頁面的dom節(jié)點，需要動態(tài)生成，準備dom的字符串，以此為模板 var str = "<strong> 用戶名字： </strong> @(name) <br> " += "<strong style = 'color:green'> 地址: </strong> @(address) <br>" += "<strong style = 'color:yello'> 性別: </strong> @(sex)" 然后我們遍歷他 for(var i=0;i<data.length;i++){ $("#mydiv").append(formateString(str,data[i])); } //簡單的數(shù)據(jù)綁定formateString 差不多就是這個意思，現(xiàn)在比較流行的模板框架，其核心原理也都是這個函數(shù)，如果有必要的話，也可以使用這些框架， arttemplate，阿里的kissy的數(shù)據(jù)綁定部分,angular的數(shù)據(jù)綁定，facebook的開源，vue等等 --> function formateString(str, data) { return str.replace(/@\((\w+)\)/g, function(match, key) { return typeof data[key] === "undefined" ? '' : data[key] }); } </script> </body> </html>
