深入理解 JavaScript 中的 replace 方法
replace方法是屬於String物件的,可用於替換字串
簡單介紹:
StringObject.replace(searchValue,replaceValue)
- StringObject:字串
- searchValue:字串或正規表示式
- replaceValue:字串或者函式
字串替換字串
'I am loser!'.replace('loser','hero')//I am hero!
直接使用字串能讓自己從loser變成hero,但是如果有2個loser就不能一起變成hero了。
'I am loser,You are loser'.replace('loser','hero');//I am hero,You are loser
正規表示式替換為字串
'I am loser,You are loser'.replace(/loser/g,'hero')//I am hero,You are hero
使用正規表示式,並將正則的global屬性改為true則可以讓所有loser都變為hero
有趣的替換字元
replaceValue可以是字串。如果字串中有幾個特定字元的話,會被轉換為特定字串。
字元 | 替換文字 |
$& | 與正則相匹配的字串 |
$` | 匹配字串左邊的字元 |
$’ | 匹配字串右邊的字元 |
$1,$2,$,3,…,$n | 匹配結果中對應的分組匹配結果 |
使用$&字元給匹配字元加大括號
var sStr='討論一下正規表示式中的replace的用法'; sStr.replace(/正規表示式/,'{$&}');//討論一下{正規表示式}中的replace的用法
使用$`和$’字元替換內容
'abc'.replace(/b/,"$`");//aac 'abc'.replace(/b/,"$'");//acc
使用分組匹配組合新的字串
'nimojs@126.com'.replace(/(.+)(@)(.*)/,"$2$1")//@nimojs
replaceValue引數可以是一個函式
StringObject.replace(searchValue,replaceValue)中的replaceValue可以是一個函式.
如果replaceValue是一個函式的話那麼,這個函式的arguments會有n+3個引數(n為正則匹配到的次數)
先看例子幫助理解:
function logArguments(){ console.log(arguments);//["nimojs@126.com", "nimojs", "@", "126.com", 0, "nimojs@126.com"] return '返回值會替換掉匹配到的目標' } console.log( 'nimojs@126.com'.replace(/(.+)(@)(.*)/,logArguments) )
引數分別為
- 匹配到的字串(此例為nimojs@126.com,推薦修改上面程式碼的正則來檢視匹配到的字元幫助理解)
- 如果正則使用了分組匹配就為多個否則無此引數。(此例的引數就分別為"nimojs", "@", "126.com"。推薦修改正則為/nimo/檢視控制檯中返回的arguments值)
- 匹配字串的對應索引位置(此例為0)
- 原始字串(此例為nimojs@126.com)
使用自定義函式將A-G字串改為小寫
'JAVASCRIPT'.replace(/[A-G]/g,function(){ return arguments[0].toLowerCase(); })//JaVaScRIPT
使用自定義函式做回撥式替換將行內樣式中的單引號刪除
'<span style="font-family:\'微軟雅黑\';">demo</span>'.replace(/\'[^']+\'/g,function(){ var sResult=arguments[0]; console.log(sResult);//'微軟雅黑' sResult=sResult.replace(/\'/g,''); console.log(sResult);//微軟雅黑 return sResult; })//<span style="font-family:微軟雅黑;">demo</span>
最後的小試牛刀
這一節是交給閱讀者發揮的內容:
1.使用函式自主實現替換字元
字元 | 替換文字 |
$& | 與正則相匹配的字串 |
$` | 匹配字串左邊的字元 |
$’ | 匹配字串右邊的字元 |
使用正則但不使用以上替換字元方法來實現有趣的替換字元中的三個例項。
2.洗撲克
需要將ThisNimojs-JavaScript使用正則替換成TJhaivsaNSicmroijpst
相關文章
- 深入理解JavaScript-replaceJavaScript
- 深入理解 JavaScript 中的 classJavaScript
- 深入理解JavaScript中的箭頭JavaScript
- 深入理解 JavaScript 中的函式JavaScript函式
- 深入理解JavaScript中的類繼承JavaScript繼承
- 深入理解Javascript中的隱式呼叫JavaScript
- 深入理解JavaScript中的WeakMap和WeakSetJavaScript
- 深入理解JavaScript中的精度丟失JavaScript
- javascript中replace的高階運用JavaScript
- 理解JavaScript中函式方法JavaScript函式
- 深入理解javascript中的繼承機制(1)JavaScript繼承
- JavaScript replace()JavaScript
- 深入理解JavaScript原型JavaScript原型
- 深入理解JavaScript物件JavaScript物件
- 深入理解 JavaScript 原型JavaScript原型
- 理解 JavaScript 中的 thisJavaScript
- 《深入理解JavaScript》——2.3 JavaScript有用嗎JavaScript
- JavaScript 程式中記憶體洩漏深入理解JavaScript記憶體
- FragmentTransaction的replace方法Fragment
- 深入理解JavaScript的this指向問題JavaScript
- 深入理解JavaScript作用域JavaScript
- 深入理解Javascript之PromiseJavaScriptPromise
- 深入理解Javascript之ModuleJavaScript
- 深入理解javascript系列(十一):thisJavaScript
- JavaScript 原型概念深入理解JavaScript原型
- 【小貼士】探一探javascript中的replaceJavaScript
- JS中this的深入理解JS
- 深入理解Js中的thisJS
- 個人對於JavaScript中Number.toFixed()方法的理解JavaScript
- 深入理解 JavaScript 非同步系列(3)—— ES6 中的 PromiseJavaScript非同步Promise
- 深入理解 Java 方法Java
- 理解 JavaScript 中的原型JavaScript原型
- 全面理解JavaScript中的thisJavaScript
- javascript 中{}和[] 的理解JavaScript
- JavaScript引數傳遞的深入理解JavaScript
- 字串replace方法的使用字串
- 深入理解 Javascript 之 作用域JavaScript
- javascript深入理解系列文章JavaScript