詳解javascript replace高級用法

<script type="text/javascript">
  /*要求將字符串中所有的a全部用A代替*/

  var str = "javascript is great script language!";
  //只會將第一個匹配到的a替換成A
  console.log(str.replace("a","A"));
  //只會將第一個匹配到的a替換成A。因為沒有在全局范圍內(nèi)查找
  console.log(str.replace(/a/,"A"));
  //所有a都被替換成了A
  console.log(str.replace(/a/g,"A"));
</script>

<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|$)表示匹配字符串結(jié)尾或字符串后面的空格*/
  var newClassName = classname.replace(/(^|\\s)unabled(\\s|$)/,””);
  document.getElementById(“j_confirm_btn”).className = newClassName;
</script>

<script>
  /*要求：將字符串中的雙引號用"-"代替*/

  var str = '"a", "b"';
  console.log(str.replace(/"[^"]*"/g,"-$1-"));
  //輸出結(jié)果為：-$1-, -$1-
  /*解釋：$1就是前面正則(/"[^"]*"/g)所匹配到的每一個字符。*/
</script>

<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就代表第一個分組匹配的內(nèi)容，$2就代表第二個分組匹配的內(nèi)容，依此類推...*/
</script>

<script>
  /*要求：將下列字符串中的"java"用紅色字體顯示*/
  
  var str = "Netscape在最初將其腳本語言命名為LiveScript，后來Netscape在與Sun合作之后將其改名為JavaScript。
JavaScript最初受Java啟發(fā)而開始設(shè)計的，目的之一就是“看上去像Java”，因此語法上有類似之處，一些名稱和命名規(guī)范也借自Java。
但JavaScript的主要設(shè)計原則源自Self和Scheme。";

  document.write(str.replace(/(java)/gi,'<span >$1</span>'));

  /*解釋：必須要開啟全局搜索和忽略大小寫，否則匹配不到所有的”java”字符*/
</script>

<script type="text/javascript">
  /* /ab(cd)\1e/ 這里的 \1 表示把第1個分組的內(nèi)容重復(fù)一遍*/

  console.log(/ab(cd)\1e/.test("abcde"));//false
  console.log(/ab(cd)\1e/.test("abcdcde"));//true

  /*要求：將下列字符串中相領(lǐng)重復(fù)的部分刪除掉"*/
  var str = "abbcccdeee";
  var newStr = str.replace(/(\w)\1+/g,"$1");
  console.log(newStr); // abcde
</script>

<script>
  var str = "bbabc";
  var newStr = str.replace(/(a)(b)/g,function (){
  console.log(arguments);//["ab", "a", "b", 2, "bbabc"]
   /*參數(shù)依次為：
    1、整個正則表達(dá)式所匹配到的字符串----"ab"
    2、第一個分組匹配到的字符串，第二個分組所匹配到的字符串....依次類推一直      到最后一個分組----"a，b"
    3、此次匹配在源字符串中的下標(biāo)，返回的是第一個匹配到的字符的下標(biāo)----2
    4、源字符串----"bbabc"
   */
  })
</script>

<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>

<h2>周星馳喜劇電影：</h2>
<div id="content"></div>
<script type="text/javascript">
  var data = {
    name: "功夫",
    protagonist: "周星馳"
  },
  domStr = '<div><span>名稱：</span><span>{{name}}</span></div><div><span>導(dǎo)演：</span><span>{{protagonist}}</span> </div>';

  document.getElementById("content").innerHTML = formatString(domStr,data);
  /*綁定數(shù)據(jù)的核心就是使用正則進(jìn)行匹配*/
  function formatString(str,data){
    return str.replace(/{{(\w+)}}/g,function (matchingStr,group1){
      return data[group1];
    });
  }
</script>

<script>
  var str = "i am a good man";
  var newStr = str.replace(/good/g,"$&");
  console.log(newStr);//結(jié)果：輸出i am a good man
  /*解釋：在這里”$&”就是與正則表達(dá)式進(jìn)行匹配的那個源字符串*/
</script>

<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);
  /*解釋：在這里”$&”可以獲取到前面正則表達(dá)式匹配的內(nèi)容，如上面的”$&”就是正則表達(dá)式匹配到的”good”*/
</script>

<script>
  /*要求：將下列字符串替換成"java-java is a good script"*/

  var str = "javascript is a good script";
  var newStr = str.replace(/script/,"-$`");
  console.log(newStr)
  /*解釋："$`"獲取的是正則左邊的內(nèi)容，如上正則中"script"字符前面的是"java"，"-$`"就是"-java"，"-$`"會把script替換掉。*/
</script>

<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右邊的內(nèi)容，如上正則中"$'"就是" is a good script"。
  " is a good language!it$'"會把正則匹配到的"script"替換掉*/
</script>