1、replace基本用法

<script>/*要求將字符串中所有的a全部用A代替*/var str = "javascript is great script language!";//只會將第一個匹配到的a替換成Aconsole.log(str.replace("a", "A")); // => jAvascript is great script language!//只會將第一個匹配到的a替換成A。因為沒有在全局范圍內查找console.log(str.replace(/a/, "A")); // => jAvascript is great script language!//所有a都被替換成了Aconsole.log(str.replace(/a/g, "A")); // => jAvAscript is greAt script lAnguAge! </script>

1.1、replace基本用法之替換移除指定class類

<div class="confirm-btn unabled mb-10" id="j_confirm_btn">提交</div> <script>/*要求將下面這個元素中的unabled類移除掉*/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-, -$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 fn.it is a good script language/*解釋：每一對括號都代表一個分組，從左往右分別代表第一個分組，第二個分組...；如上"*(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>/* /ab(cd)\1e/ 這里的 \1 表示把第1個分組的內容重復一遍*/console.log(/ab(cd)\1e/.test("abcde")); // => falseconsole.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函數的第二個參數不僅可以是一個字符，還可以是一個函數！

<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、此次匹配在源字符串中的下標，返回的是第一個匹配到的字符的下標----24、源字符串----"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); // => Tomorrow May Not Be Better, But Better Tomorrow Will Surely Come! </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-good man" */var str = "i am a good man";var newStr = str.replace(/good/g, "$&-$&");console.log(newStr); // => i am a good-good man/*解釋：在這里”$&”可以獲取到前面正則表達式匹配的內容，如上面的”$&”就是正則表達式匹配到的”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); // => java-java is a good script/*解釋："$`"獲取的是正則左邊的內容，如上正則中"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); // => java is a good language!it is a good script is a good script/*解釋："$'"獲取的就是str右邊的內容，如上正則中"$'"就是" is a good script"。" is a good language!it$'"會把正則匹配到的"script"替換掉*/ </script> 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的repalce的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。