欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解javascript replace高級用法

 更新時間:2019年02月17日 14:26:27   作者:heath_learning  
這篇文章主要介紹了詳解javascript replace高級用法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

在前端與后臺交互的時候我們通常都需要將后臺傳遞的數(shù)據(jù)綁定到html中,這個綁定數(shù)據(jù)的方式我們通常是使用jQuery或者使用原生的innerHTML進(jìn)行綁定,當(dāng)然也可以使用artTemplate模板來綁定數(shù)據(jù),那么artTemplate模板它綁定數(shù)據(jù)的原理是什么呢?其實它就是利用了replace()方法。
對于正則replace約定了一個特殊標(biāo)記符”$”:

1)、$i(i取值范圍1~99):表示從左到右正則子表達(dá)式所匹配的文本
2)、$&:表示與正則表達(dá)式匹配的全部文本
3)、$`(`:1旁邊的那個鍵):表示匹配字符串的左邊文本
4)、$'(':單引號):表示匹配字符串的右邊文本
5)、$$:表示$轉(zhuǎn)移

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。因為沒有在全局范圍內(nèi)查找
  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|$)表示匹配字符串結(jié)尾或字符串后面的空格*/
  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-"));
  //輸出結(jié)果為:-$1-, -$1-
  /*解釋:$1就是前面正則(/"[^"]*"/g)所匹配到的每一個字符。*/
</script>

2.2、$i與分組結(jié)合使用

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

2.3、$i與分組結(jié)合使用----關(guān)鍵字高亮顯示

當(dāng)我們使用谷歌搜索的時候我們會發(fā)現(xiàn)我們搜索的關(guān)鍵字都被高亮顯示了,那么這種效果用JavaScript能否顯示呢?答案是可以的,使用replace()很輕松就搞定了。

<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 style="color: red;font-weight: 800;">$1</span>'));

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

2.4、反向分組----分組的反向引用

在正則中,當(dāng)我們需要匹配兩個或多個連續(xù)的相同的字符的時候,就需要用到反向引用了,查找連續(xù)重復(fù)的字符是反向引用最簡單卻也是最有用的應(yīng)用之一。上面的”$i”也是反向分組的一種形式,這里再介紹另一種反向分組。

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

3、replace高級用法之參數(shù)二為函數(shù)

replace函數(shù)的第二個參數(shù)不僅可以是一個字符,還可以是一個函數(shù)!

3.1、參數(shù)二為函數(shù)之參數(shù)詳解

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

3.2、參數(shù)二為函數(shù)之首字母大寫案例

<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、參數(shù)二為函數(shù)之綁定數(shù)據(jù)----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>導(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>

4、replace高級用法之獲取與正則表達(dá)式匹配的文本

4.1、replace高級用法之獲取與正則表達(dá)式進(jìn)行匹配的源字符串

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

4.2、replace高級用法之獲取正則表達(dá)式匹配到的字符

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

5、replace高級用法之獲取正則匹配的左邊的字符

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

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

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 你需要了解的ES6語法大總結(jié)

    你需要了解的ES6語法大總結(jié)

    ECMAScript是瀏覽器腳本語言的規(guī)范,而我們熟知的js語言,如JavaScript則是規(guī)范的具體實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于ES6語法總結(jié)的相關(guān)資料,需要的朋友可以參考下
    2022-05-05
  • JS加密解密之保存到桌面書簽

    JS加密解密之保存到桌面書簽

    漸進(jìn)式Web應(yīng)用是一種結(jié)合了網(wǎng)頁和原生移動應(yīng)用(Native App)優(yōu)點的新型應(yīng)用開發(fā)模式,這篇文章給大家介紹JS加密解密之保存到桌面書簽的操作方法,感興趣的朋友跟隨小編一起看看吧
    2024-03-03
  • javascript前端埋點上報的幾種方式

    javascript前端埋點上報的幾種方式

    本文將介紹前端埋點上報的幾種常見方式,并詳細(xì)闡述如何在項目中運用這些方式進(jìn)行數(shù)據(jù)上報,以幫助開發(fā)者更好地進(jìn)行數(shù)據(jù)收集和分析,感興趣的可以了解一下
    2023-11-11
  • js this函數(shù)調(diào)用無需再次抓獲id,name或標(biāo)簽名

    js this函數(shù)調(diào)用無需再次抓獲id,name或標(biāo)簽名

    this就是你當(dāng)前要執(zhí)行的js所抓獲的節(jié)點,這樣在js里就可以不用document.getElement之類的寫法來抓獲id,name或標(biāo)簽名,具體示例如下
    2014-03-03
  • 前端高頻面試題之JS中堆和棧的區(qū)別和瀏覽器的垃圾回收機(jī)制

    前端高頻面試題之JS中堆和棧的區(qū)別和瀏覽器的垃圾回收機(jī)制

    本文給大家分享前端高頻面試題JS中堆和棧的區(qū)別和瀏覽器的垃圾回收機(jī)制,本文分文別類給大家介紹了棧(stack)和堆(heap)的區(qū)別基本類型和引用類型的相關(guān)知識,瀏覽器垃圾回收機(jī)制包括基本概念給大家介紹的非常詳細(xì),需要的朋友參考下吧
    2023-10-10
  • 微信小程序?qū)崿F(xiàn)分享商品海報功能

    微信小程序?qū)崿F(xiàn)分享商品海報功能

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)分享商品海報功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • js實現(xiàn)Select列表內(nèi)容自動滾動效果代碼

    js實現(xiàn)Select列表內(nèi)容自動滾動效果代碼

    這篇文章主要介紹了js實現(xiàn)Select列表內(nèi)容自動滾動效果的方法,涉及javascript簡單遞歸調(diào)用遍歷select及時間函數(shù)的相關(guān)使用技巧,需要的朋友可以參考下
    2015-08-08
  • bootstrap動態(tài)添加面包屑(breadcrumb)及其響應(yīng)事件的方法

    bootstrap動態(tài)添加面包屑(breadcrumb)及其響應(yīng)事件的方法

    這篇文章主要介紹了bootstrap動態(tài)添加面包屑(breadcrumb)及其響應(yīng)事件的方法,涉及js數(shù)據(jù)傳輸及定義響應(yīng)事件相關(guān)操作技巧,需要的朋友可以參考下
    2017-05-05
  • echarts餅圖標(biāo)簽formatter使用及餅圖自定義標(biāo)簽

    echarts餅圖標(biāo)簽formatter使用及餅圖自定義標(biāo)簽

    項目中有遇到需要使用餅圖展示每種狀態(tài)所占比例,去echarts官網(wǎng)學(xué)習(xí)了一番,下面這篇文章主要給大家介紹了關(guān)于echarts餅圖標(biāo)簽formatter使用及餅圖自定義標(biāo)簽的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • JS實現(xiàn)點餐自動選擇框(案例分析)

    JS實現(xiàn)點餐自動選擇框(案例分析)

    這篇文章主要介紹了JS實現(xiàn)點餐自動選擇框功能,點擊上方全選和全不選選擇框?qū)崿F(xiàn)對應(yīng)功能,本文分步驟通過實例代碼講解的非常詳細(xì),需要的朋友可以參考下
    2019-12-12

最新評論