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

Javascript中replace()小結(jié)

 更新時間:2015年09月30日 10:13:56   投稿:hebedich  
在javascript中,replace方法是屬于String對象的,可用于替換字符串。今天我們就來詳細(xì)探討下一些replace()方法的使用

關(guān)于定義

  replace() 方法用于在字符串中用一些字符替換另一些字符,或替換一個與正則表達(dá)式匹配的子串。

關(guān)于語法

stringObject.replace(regexp/substr,replacement)

關(guān)于參數(shù)

參數(shù) 描述

regexp/substr

必需。規(guī)定子字符串或要替換的模式的 RegExp 對象。

請注意,如果該值是一個字符串,則將它作為要檢索的直接量文本模式,而不是首先被轉(zhuǎn)換為 RegExp 對象。

replacement 必需。一個字符串值。規(guī)定了替換文本或生成替換文本的函數(shù)。


1、第一個參數(shù)regexp/substr,使用正則表達(dá)式時用全局標(biāo)識符g,可以替換所有匹配的子串,否則只會匹配一次。

    例如:

var str = "aaaaa"; 
var str1 = str.replace("a", "b");
var str2 = str.replace(/a/g, "b");

  運(yùn)行結(jié)果: str1 -> "baaaa",str2 -> "bbbbb"

2、第二個參數(shù)replacement,可以是字符串或者function,也可以是$字符具有的特定的含義。

字符 替換文本
$1、$2、...、$99 與 regexp 中的第 1 到第 99 個子表達(dá)式相匹配的文本。
$& 與 regexp 相匹配的子串。
$` 位于匹配子串左側(cè)的文本。
$' 位于匹配子串右側(cè)的文本。
$$ 直接量符號。

   a. function的例子:

var str = "111222aa";
str.replace(/(\d{3})/g, function(word){
 return "b";
});

     運(yùn)行結(jié)果: "bbaa"

    b. $的例子

var str = "1234567890";
str.replace( /(\d{3})(\d{3})(\d{4})/g, "$1-$2-$3" );

     運(yùn)行結(jié)果: "123-456-7890"

注: 大多時候是利用regexp和$的結(jié)合來實(shí)現(xiàn)需求,所以知道一些基本的正則表達(dá)式規(guī)則是有必要的。

字符串替換字符串

'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

正則表達(dá)式替換為字符串

'I am loser,You are loser'.replace(/loser/g,'hero')
//I am hero,You are hero

使用正則表達(dá)式,并將正則的global屬性改為true則可以讓所有l(wèi)oser都變?yōu)閔ero

有趣的替換字符

replaceValue可以是字符串。如果字符串中有幾個特定字符的話,會被轉(zhuǎn)換為特定字符串。

字符 替換文本
$& 與正則相匹配的字符串
$` 匹配字符串左邊的字符
$' 匹配字符串右邊的字符
$1,$2,$,3,…,$n 匹配結(jié)果中對應(yīng)的分組匹配結(jié)果
使用$&字符給匹配字符加大括號

var sStr='討論一下正則表達(dá)式中的replace的用法';
sStr.replace(/正則表達(dá)式/,'{$&}');
//討論一下{正則表達(dá)式}中的replace的用法
使用$`和$'字符替換內(nèi)容

'abc'.replace(/b/,"$`");
//aac
'abc'.replace(/b/,"$'");
//acc
使用分組匹配組合新的字符串

'nimojs@126.com'.replace(/(.+)(@)(.*)/,"$2$1")
//@nimojs
replaceValue參數(shù)可以是一個函數(shù)

StringObject.replace(searchValue,replaceValue)中的replaceValue可以是一個函數(shù).
如果replaceValue是一個函數(shù)的話那么,這個函數(shù)的arguments會有n+3個參數(shù)(n為正則匹配到的次數(shù))

先看例子幫助理解:

function logArguments(){ 
 console.log(arguments);
//["nimojs@126.com", "nimojs", "@", "126.com", 0, "nimojs@126.com"] 
 return '返回值會替換掉匹配到的目標(biāo)'
}
console.log(
 'nimojs@126.com'.replace(/(.+)(@)(.*)/,logArguments)
)

參數(shù)分別為

匹配到的字符串(此例為nimojs@126.com,推薦修改上面代碼的正則來查看匹配到的字符幫助理解)
如果正則使用了分組匹配就為多個否則無此參數(shù)。(此例的參數(shù)就分別為”nimojs”, “@”, “126.com”。推薦修改正則為/nimo/查看控制臺中返回的arguments值)
匹配字符串的對應(yīng)索引位置(此例為0)
原始字符串(此例為nimojs@126.com)
使用自定義函數(shù)將A-G字符串改為小寫

'JAVASCRIPT'.replace(/[A-G]/g,function(){
 return arguments[0].toLowerCase();
})
//JaVaScRIPT

使用自定義函數(shù)做回調(diào)式替換將行內(nèi)樣式中的單引號刪除

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

相關(guān)文章

  • JavaScript實(shí)現(xiàn)圖片DIV豎向滑動的方法

    JavaScript實(shí)現(xiàn)圖片DIV豎向滑動的方法

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片DIV豎向滑動的方法,涉及javascript操作div層的相關(guān)技巧,需要的朋友可以參考下
    2015-04-04
  • JavaScript中arguments的使用方法

    JavaScript中arguments的使用方法

    這篇文章主要介紹了JavaScript中arguments的使用方法,arguments?是一個對應(yīng)于傳遞給函數(shù)的參數(shù)的類數(shù)組對象。下文詳細(xì)介紹,需要的小伙伴可以參考一下
    2022-05-05
  • Javascript中字符串和數(shù)字的操作方法整理

    Javascript中字符串和數(shù)字的操作方法整理

    字符串和數(shù)字的操作在js中非常頻繁,也非常重要。以往看完書之后都能記得非常清楚,但稍微隔一段時間不用,便會忘得差不多,記性不好是硬傷啊。下面這篇文章就對字符串和數(shù)字的一些常用操作做個整理,一者加深印象,二者方便今后溫習(xí)查閱。需要的朋友們可以參考借鑒。
    2017-01-01
  • Javascript 面試題隨筆

    Javascript 面試題隨筆

    前天去面試遇到的一道題,面試的問題大概是當(dāng)test.increase被調(diào)用時,test和test2的count值分別是多少
    2011-03-03
  • Javascript數(shù)組方法reduce的妙用之處分享

    Javascript數(shù)組方法reduce的妙用之處分享

    這篇文章主要給大家介紹了關(guān)于Javascript數(shù)組方法reduce的妙用之處,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Javascript具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06
  • webpack5的entry和output配置小白學(xué)習(xí)

    webpack5的entry和output配置小白學(xué)習(xí)

    這篇文章主要為大家介紹了webpack5的entry和output使用配置小白學(xué)習(xí)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-05-05
  • JS制作圖形驗(yàn)證碼實(shí)現(xiàn)代碼

    JS制作圖形驗(yàn)證碼實(shí)現(xiàn)代碼

    這篇文章主要為大家詳細(xì)介紹了JS制作圖形驗(yàn)證碼實(shí)現(xiàn)代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • js 判斷上傳文件大小及格式代碼

    js 判斷上傳文件大小及格式代碼

    用js對上傳的文件大小以及格式進(jìn)行初步的判斷,在服務(wù)端再進(jìn)行一次判斷(防止瀏覽器拒絕執(zhí)行腳本文件)下面有個不錯的方法大家可以參考下
    2013-11-11
  • JavaScript代碼實(shí)現(xiàn)左右上下自動晃動自動移動

    JavaScript代碼實(shí)現(xiàn)左右上下自動晃動自動移動

    最近幾天做了一個項目,原來是用css3動畫做的,由于不兼容IE,改成用js做了,特此分享給大家,供大家參考
    2016-04-04
  • 淺析ES6的八進(jìn)制與二進(jìn)制整數(shù)字面量

    淺析ES6的八進(jìn)制與二進(jìn)制整數(shù)字面量

    這篇文章給大家介紹了ES6特性中的八進(jìn)制和二進(jìn)制整數(shù)字面量,介紹的挺不錯的現(xiàn)在分享給大家,有需要的可以參考借鑒。
    2016-08-08

最新評論