在前端與后臺交互的時候我們通常都需要將后臺傳遞的數據綁定到html中,這個綁定數據的方式我們通常是使用jQuery或者使用原生的innerHTML進行綁定,當然也可以使用artTemplate模板來綁定數據,那么artTemplate模板它綁定數據的原理是什么呢?其實它就是利用了replace()方法。
對于正則replace約定了一個特殊標記符”$”:
1)、$i(i取值范圍1~99):表示從左到右正則子表達式所匹配的文本
2)、$&:表示與正則表達式匹配的全部文本
3)、$`(`:1旁邊的那個鍵):表示匹配字符串的左邊文本
4)、$'(':單引號):表示匹配字符串的右邊文本
5)、$$:表示$轉移
1、replace基本用法
<script type="text/javascript">  /*要求將字符串中所有的a全部用A代替*/  var str = "javascript is great script language!";  //只會將第一個匹配到的a替換成A  console.log(str.replace("a","A"));  //只會將第一個匹配到的a替換成A。因為沒有在全局范圍內查找  console.log(str.replace(/a/,"A"));  //所有a都被替換成了A  console.log(str.replace(/a/g,"A"));</script>1.1、replace基本用法之替換移除指定class類
<script type="text/javascript"> /*要求將下面這個元素中的unabled類移除掉*/ <div class=”confirm-btn unabled mb-10” id=”j_confirm_btn”>提交</div> var classname = document.getElementById(“j_confirm_btn”).className; /*(^|//s)表示匹配字符串開頭或字符串前面的空格,(//s|$)表示匹配字符串結尾或字符串后面的空格*/ var newClassName = classname.replace(/(^|//s)unabled(//s|$)/,””); document.getElementById(“j_confirm_btn”).className = newClassName;</script>
2、replace高級用法之 ---- $i
2.1、簡單的$i用法
<script> /*要求:將字符串中的雙引號用"-"代替*/ var str = '"a", "b"'; console.log(str.replace(/"[^"]*"/g,"-$1-")); //輸出結果為:-$1-, -$1- /*解釋:$1就是前面正則(/"[^"]*"/g)所匹配到的每一個字符。*/</script>
2.2、$i與分組結合使用
<script> /*要求:將下面字符串替換成:javascript is fn.it is a good script language*/ var str = "javascript is a good script language"; console.log(str.replace(/(javascript)/s*(is)/g,"$1 $2 fn.it $2")); /*解釋:每一對括號都代表一個分組,從左往右分別代表第一個分組,第二個分組...;如上"*(javascript)"為第一個分組,"(is)"為第二個分組。$1就代表第一個分組匹配的內容,$2就代表第二個分組匹配的內容,依此類推...*/</script>
2.3、$i與分組結合使用----關鍵字高亮顯示
當我們使用谷歌搜索的時候我們會發現我們搜索的關鍵字都被高亮顯示了,那么這種效果用JavaScript能否顯示呢?答案是可以的,使用replace()很輕松就搞定了。
<script> /*要求:將下列字符串中的"java"用紅色字體顯示*/ var str = "Netscape在最初將其腳本語言命名為LiveScript,后來Netscape在與Sun合作之后將其改名為JavaScript。JavaScript最初受Java啟發而開始設計的,目的之一就是“看上去像Java”,因此語法上有類似之處,一些名稱和命名規范也借自Java。但JavaScript的主要設計原則源自Self和Scheme。"; document.write(str.replace(/(java)/gi,'<span style="color: red;font-weight: 800;">$1</span>')); /*解釋:必須要開啟全局搜索和忽略大小寫,否則匹配不到所有的”java”字符*/</script>
2.4、反向分組----分組的反向引用
在正則中,當我們需要匹配兩個或多個連續的相同的字符的時候,就需要用到反向引用了,查找連續重復的字符是反向引用最簡單卻也是最有用的應用之一。上面的”$i”也是反向分組的一種形式,這里再介紹另一種反向分組。
<script type="text/javascript">  /* /ab(cd)/1e/ 這里的 /1 表示把第1個分組的內容重復一遍*/  console.log(/ab(cd)/1e/.test("abcde"));//false  console.log(/ab(cd)/1e/.test("abcdcde"));//true  /*要求:將下列字符串中相領重復的部分刪除掉"*/  var str = "abbcccdeee";  var newStr = str.replace(/(/w)/1+/g,"$1");  console.log(newStr); // abcde</script>3、replace高級用法之參數二為函數
replace函數的第二個參數不僅可以是一個字符,還可以是一個函數!
3.1、參數二為函數之參數詳解
<script>  var str = "bbabc";  var newStr = str.replace(/(a)(b)/g,function (){  console.log(arguments);//["ab", "a", "b", 2, "bbabc"]   /*參數依次為:    1、整個正則表達式所匹配到的字符串----"ab"    2、第一個分組匹配到的字符串,第二個分組所匹配到的字符串....依次類推一直      到最后一個分組----"a,b"    3、此次匹配在源字符串中的下標,返回的是第一個匹配到的字符的下標----2    4、源字符串----"bbabc"   */  })</script>3.2、參數二為函數之首字母大寫案例
<script>  /*要求:將下列字符串中的所有首字母大寫*/    var str = "Tomorrow may not be better, but better tomorrow will surely come!";  var newStr = str.replace(//b/w+/b/gi,function (matchStr){    console.log(matchStr);//匹配到的字符    return matchStr.substr(0,1).toUpperCase() + matchStr.substr(1);  });  console.log(newStr);</script>3.3、參數二為函數之綁定數據----artTemplate模板核心
<h1>周星馳喜劇電影:</h1><div id="content"></div><script type="text/javascript">  var data = {    name: "功夫",    protagonist: "周星馳"  },  domStr = '<div><span>名稱:</span><span>{{name}}</span></div><div><span>導演:</span><span>{{protagonist}}</span> </div>';  document.getElementById("content").innerHTML = formatString(domStr,data);  /*綁定數據的核心就是使用正則進行匹配*/  function formatString(str,data){    return str.replace(/{{(/w+)}}/g,function (matchingStr,group1){      return data[group1];    });  }</script>4、replace高級用法之獲取與正則表達式匹配的文本
4.1、replace高級用法之獲取與正則表達式進行匹配的源字符串
<script> var str = "i am a good man"; var newStr = str.replace(/good/g,"$&"); console.log(newStr);//結果:輸出i am a good man /*解釋:在這里”$&”就是與正則表達式進行匹配的那個源字符串*/</script>
4.2、replace高級用法之獲取正則表達式匹配到的字符
<script> /*要求:將"i am a good man"替換成"i am a good-gond man" */ var str = "i am a good man"; var newStr = str.replace(/good/g,"$&-$&"); console.log(newStr); /*解釋:在這里”$&”可以獲取到前面正則表達式匹配的內容,如上面的”$&”就是正則表達式匹配到的”good”*/</script>
5、replace高級用法之獲取正則匹配的左邊的字符
<script> /*要求:將下列字符串替換成"java-java is a good script"*/ var str = "javascript is a good script"; var newStr = str.replace(/script/,"-$`"); console.log(newStr) /*解釋:"$`"獲取的是正則左邊的內容,如上正則中"script"字符前面的是"java","-$`"就是"-java","-$`"會把script替換掉。*/</script>
6、replace高級用法之獲取正則匹配的右邊的字符
<script> /*要求:將下列字符替換成"java is a good language!it is a good script is a good script"*/ var str = "javascript is a good script"; var newStr = str.replace(/script/," is a good language!it$'"); console.log(newStr) /*解釋:"$'"獲取的就是str右邊的內容,如上正則中"$'"就是" is a good script"。 " is a good language!it$'"會把正則匹配到的"script"替換掉*/</script>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答