【javascript杂谈】你所不知道的replace函数

原文:【javascript杂谈】你所不知道的replace函数

前言


最近在做面试题的时候总会用到这个函数，这个函数总是和正则表达式联系到一起，并且效果很是不错，总能很简单出色的完成字符串的实际问题，大家肯定都会使用这个函数，像我一样的初学者可能对这个函数的了解还是不够深的，今天就总结一下，了解一下，再做几道网上的题目练练手，给将要面试的同学打打气。

介绍

使用一个替换值替换掉一个替换模式在原字符串中一个或所有的匹配项，并返回替换后的字符串，这个替换模式可以是字符串或者正则表达式，替换值可以是一个字符串或者是一个函数。

后面的大的黑体就是我们开始没有注意到的。

语法

newstring = str.replace(regexp|substr, newSubStr|function[,  flags]);这是官方的解释不是很清楚，一会好好解释下。

参数



regexp

一个 REGEXP(正则)对象，该正则所匹配的内容会被第二个参数的返回值替换掉。


substr

被替换掉的一个字符串


newSubStr

替换掉第一个参数在原字符串中的匹配部分，该字符串中可以内插一些特殊的变量名。对于正则replace约定了一个特殊标记符$：


  1. $n (n:1-99) : 表示从左到右正则子表达式所匹配的文本。各个分组匹配的字符串

  2. $&:表示与正则表达式匹配的全文本。

  3. $`(`:切换技能键)：表示匹配字符串的左边文本。

  4. $’(‘:单引号)：表示匹配字符串的右边文本。

  5. $$：表示$转移。


function

是一个函数，可以有返回值，也可以无返回值。参数的个数不固定，参数挺麻烦的，咱主要就是说这个函数，


  1. 第一个参数为每次匹配的全文本（$&），就是整个匹配的字符串

  2. 中间参数为子表达式匹配字符串，个数不限.( $n (n:1-99))，有分组的时候

  3. 倒数第二个参数为匹配文本字符串的匹配下标位置。

  4. 最后一个参数表示字符串本身。

这个函数在执行replace时执行，如果有返回值，返回值用来替换replace的第一个参数。



flags

就是正则表达式那些特殊的标志，可有可无的，当第一个参数是字符串的时候使用。



g   全局替换

i   忽略大小写

m   多行模式

y      sticky

注意：replace函数并不改变原来的字符串，而是返回来一个新的字符串。

好多例子

说估计大家也是不明白，现在我把所有的情况弄个例子，帮助大家理解：

例子1：

//replace(str,str);
var str = "I am hainan";

var newStr = str.replace("hainan","Allenxing");

console.log(newStr);//I am Allenxing

console.log(str);//I am hainan

例子2：

// replace(str,str,flag)

var str = "I am hainan hainan";

var newStr = str.replace("hainan","Allenxing","gi");

console.log(newStr);//I am Allenxing Allenxing(FireFox下)  I am Allenxing Allenxing(chrome IE下)

console.log(str);//I am hainan hainan

这种各情况个浏览器支持的不好，建议使用带标记的正则表达式，而不是使用字符串的这种标记，官方这样说

A string specifying a combination of regular expression flags. The use
of the flags parameter in the String.replace method is non-standard, use a
RegExp object with the corresponding flags.

例子3：


// replace(RegExp,str)

var str = "I am hainan hainan";

var newStr1 = str.replace(/hainan/,"Allenxing");

console.log(newStr1);//I am Allenxing hainan


var newStr2 = str.replace(/hainan/g,"Allenxing");

console.log(newStr2);//I am Allenxing Allenxing


var str1 = "I am hainan Hainan";

console.log(str1.replace(/hainan/ig,"Allenxing"));//I am Allenxing Allenxing

console.log(str1.replace(/hainan/g,"Allenxing"));//I am Allenxing Hainan

例子4：$1是匹配第一个分组的内容,$2是匹配第一个分组的内容......

//replace(RegExp,‘特殊标记‘)

var str = "I am hainan hainan";

console.log( str.replace(/(hainan)/,"*$1*") );//I am *hainan* hainan

解释一下：/(hainan)/
匹配的是第一个hainan，我们使用"*$1*"的意思就是"*hainan*"，用它替换hainan，是第二个参数替换前面的整体。

例子5：

//replace(RegExp,‘特殊标记‘)

var str = "I am hainan Allenxing";

console.log( str.replace(/(hainan)\s*(Allenxing)/g,"$2 $1") );//I am Allenxing hainan

例子6：

//replace(RegExp,‘特殊标记‘)

var str = "I am hainan Allenxing";

console.log( str.replace(/(hainan)\s*(?:Allenxing)/g,"$2 $1") );//I am $2 hainan

解释：(?:)是非捕获分组，匹配内容但是不捕获，也就是$2中现在没有内容，那么就按照$2是个字符串输出。

例子7：$&代表正则匹配的整体

//replace(RegExp,‘特殊标记‘)

var str = "hainan";

console.log( str.replace(/(h)ainan/g,"$& starts with $1") );//hainan starts with h

例子8：$`表示匹配字符串的左边文本，$’(‘:单引号)表示匹配字符串的右边文本。

//replace(RegExp,"特殊标记")

var str = "javascript";

console.log(str.replace(/java/,"$&$‘ is "));//javascript is script


console.log(str.replace(/script/,"$& is not $`"));//avascript is not java

参数是function


我们前面简单介绍了参数function，我们写个例子看看这个函数的参数都有什么东西，

//replace(RegExp,function)

var str = "I am hainan Allenxing";

console.log( str.replace(/(hainan)\s*(Allenxing)/g,function(){

  console.(arguments);//看看参数的样子

}) );

看截图吧，清楚些

这样可以清楚的看出来，函数的第一个参数是正则匹配的全文本(hainan
Allenxing)，第二个是第一个分组匹配的文本(hainan)，第三个是第二个分组匹配的文本(Allenxing)，第四个参数是匹配文本字符串的匹配下标位置，第五个参数是整个输入的字符串(I
am hainan Allenxing)。后面的几个参数的位置肯能会改变，因为再有分组的话，中间分组的参数个数会增加。

再看下结果，I am undefined
 ，由于我们function没有明确返回值，所以就是undefined，用undefined替换了正则匹配的全文本。

还有一个问题就是，匹配的时候这个function要执行几次呢？每一次里面的参数的值会发生什么变化呢？看例子

//replace(RegExp,function)

var str = "I am hainan hainan";

console.log( str.replace(/(hainan)/g,function(){

  console.log(arguments);

}) );

结果就是这样

这个可以看出，function执行了两遍，就是因为正则(/(hainan)/g)匹配了两遍，我们可以再验证一下，

//replace(RegExp,function)

var str = "I am hainan hainan";

console.log( str.replace(/(hainan)/,function(){

  console.log(arguments);

}) );

确实是这样吧，里面的参数时每一次匹配的结果。而我们每次替换的值就是第一个参数的值，因为第一的参数就是正则匹配的全文本嘛。

用function解决几个前面的例子吧

先看例子5那个

//replace(RegExp,‘特殊标记‘)

var str = "I am hainan Allenxing";

console.log(str.replace(/(hainan)\s*(Allenxing)/g,function(arg0,arg1,arg2){

     return arg2 + " " + arg1;

}));

//I am Allenxing hainan

再看例子8

var str = "javascript";

console.log(str.replace(/java(script)/g,function(arg0,arg1){

   return arg0 +" is " + arg1;

}))

都是差不多的，只是用function做参数时，我们不能使用原来的正则表达式来得到匹配字符的左右的字符，需要修改正则表达式。

弄一个实际的例子，查找字符串中出现最多的字符和个数？  
例如：sdjksfssscfssdd  -> 字符最多的是s，出现了7次。用replace函数解决。


var str = "sdjksfssscfssdd";

str = str.split("").sort().join("");

var count = 0;

var val;

str.replace(/(\w)\1*/g,function(arg0,arg1){

    if(arg0.length > count){

      count = arg0.length;

      val = arg1;

    }

});

console.log(val+" 出现了"+count+" 次");

小结

replace函数就总结到这，其实它能做好多事情，其实主要是正则表达式的功劳，正则表达式这里就不详细说了，园子里好多牛人都总结过，大家可以找找看看，想要面试的同学好好准备吧。

【javascript杂谈】你所不知道的replace函数,布布扣,bubuko.com

时间： 2024-10-13 01:06:05

【javascript杂谈】你所不知道的replace函数的相关文章

JavaScript中你所不知道的Object（二）--Function篇

上一篇(JavaScript中你所不知道的Object(一))说到,Object对象有大量的内部属性,而其中多数和外部属性的操作有关.最后留了个悬念,就是Boolean.Date.Number.String.Function等有更多的内部属性,而它们分别是什么呢? 这些内部属性不能像Object的内部属性一样一言以蔽之,因为它们各有各的用处和特点.其中核心的部分自然是最特殊的对象,Function对象.我们先从简单的开始: [[PrimitiveValue]]: 值的类型是基础数据类型.所以所有

JavaScript你所不知道的困惑（2）

困惑一: var obj1 = new Object(); var obj2 = obj1; obj1.name = "阳光小强"; alert(obj2.name); //输出结果:阳光小强 JavaScript中的5个基本类型:Undefined.Null.Boolean.Number和String都是按值访问的,可以操作保存在变量中的实际的值,内存空间如下: var num1 = 5; var num2 = num1; 引用类型的值是保存在内存中的对象,JavaScript不允许

JavaScript你所不知道的困惑（1）

困惑一: 先看一个例子: function test(){ message = "hi"; } test(); alert(message); 会输出字符串"hi" 在函数内部使用var定义的变量是局部变量,省略var操作符的变量是全局变量. 困惑二: alert(undefined == null) 结果是"true" 我们知道在js中分为基本类型和引用类型,基本类型包括number.string.boolean.undefined.null.

你所不知道的JavaScript数组

你所不知道的JavaScript数组 相信每一个 javascript 学习者,都会去了解 JS 的各种基本数据类型,数组就是数据的组合,这是一个很基本也十分简单的概念,他的内容没多少,学好它也不是件难事情.但是本文着重要介绍的并不是我们往常看到的 Array,而是 ArrayBuffer. 我写的很多东西都是因为要完成某些特定的功能而刻意总结的,可以算是备忘,本文也是如此!前段时间一直在研究 Web Audio API 以及语音通信相关的知识,内容侧重于音频流在 AudioContext 各个

JavaScript你所不知道的困惑（3）

困惑一: window.color = "red"; var o = {color: "blue"}; function sayColor(){ alert(this.color); } sayColor(); //red sayColor.call(this); //red sayColor.call(window); //red sayColor.call(o); //blue call方法能扩充函数作用域,每个函数都包含两个非继承而来的方法:apply()和c

Android中Context详解 ---- 你所不知道的Context

转载至 :http://blog.csdn.net/qinjuning 前言:本文是我读<Android内核剖析>第7章 后形成的读书笔记 ,在此向欲了解Android框架的书籍推荐此书. 大家好,  今天给大家介绍下我们在应用开发中最熟悉而陌生的朋友-----Context类 ,说它熟悉,是应为我们在开发中 时刻的在与它打交道,例如:Service.BroadcastReceiver.Activity等都会利用到Context的相关方法 : 说它陌生,完全是 因为我们真正的不懂Context

Android中Context详解 ---- 你所不知道的Context (转载)

Android中Context详解 ---- 你所不知道的Context (转载) http://blog.csdn.net/qinjuning 大家好,  今天给大家介绍下我们在应用开发中最熟悉而陌生的朋友-----Context类 ,说它熟悉,是应为我们在开发中 时刻的在与它打交道,例如:Service.BroadcastReceiver.Activity等都会利用到Context的相关方法 : 说它陌生,完全是 因为我们真正的不懂Context的原理.类结构关系.一个简单的问题是,一个应用

Android中Context详解 ---- 你所不知道的Context（转）

Android中Context详解 ---- 你所不知道的Context(转)                                              本文出处 :http://blog.csdn.net/qinjuning 前言:本文是我读<Android内核剖析>第7章 后形成的读书笔记 ,在此向欲了解Android框架的书籍推荐此书. 大家好,  今天给大家介绍下我们在应用开发中最熟悉而陌生的朋友-----Context类 ,说它熟悉,是应为我们在开发中 时刻的在与它打

你所不知道的JSON.stringify

译者按: 老司机们,你知道JSON.stringify还有第二个和第三个可选参数吗?它们是什么呢? 原文: What you didn't know about JSON.Stringify 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. JSON已经逐渐替代XML被全世界的开发者广泛使用.本文深入讲解JavaScript中使用JSON.stringify的一些细节问题.首先简单回顾一下JSON和JavaScript: 不是所有的合法