js replace方法解析记录

1、方法定义：

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串
语法：stringObject.replace(regexp/substr,replacement)
说明：regexp/substr（必须），规定子字符串或要替换的模式的RegExp对象。如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为RegExp对象。
replacement（必须）： 替换文本或生成替换文本的函数
返回值：一个用replacement替换了regexp的第一次匹配或所有匹配之后得到的新字符串。

2、基本用法

这个函数有两个参数，第一个参数是用于搜索待替换的字符串，搜索方式可以分为精确搜索（完全匹配）和模糊搜索（正则式匹配）。接下来针对该参数做一个说明

2.1、regexp/substr参数说明：

2.1.1、完全匹配(substr)

所谓的完全匹配就是根据第一个参数为substr。如果stringObject里面包含substr，则用replacement替换，并且返回替换后的字符串。例如：

var str="Visit Microsoft!";
str = str.replace("Microsoft","W3School");
console.log(str);
//输出结果为Visit W3School!

注意：这个完全替换只会替换第一个

var str="Visit Microsoft Microsoft!";
str = str.replace("Microsoft","W3School");
console.log(str);
//输出结果为Visit W3School Microsoft!

2.1.2、正则式匹配(regexp)

2.1.1描述的完全匹配相对比较好理解。就是正序遍历到第一个匹配的字符串并且替换后返回，但这样的话就会有局限性，无法完全替换，并且不灵活，无法满足日常的使用要求。因为我们需要将第一个参数改成正则式参数，可以进行灵活的匹配替换

关于js的正则式。可以参照W3cSchool正则式参考手册

这边简单说明一下：

1. 直接语法：
   /pattern/attributes
   pattern： 我们最常要编辑的正则表达式
   attributes: 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的 
   匹配和多行匹配。这个可以多个同时使用，例如/gi

正则式字符串匹配

var str="Visit Microsoft Microsoft!";
str = str.replace(/Microsoft/,"W3School");
console.log(str);
//输出Visit W3School Microsoft!

上面这个例子就是标准的正则式匹配，但是同样的，他也只能匹配一次，要想匹配所有的字符串，需要用到2.1里面描述的attributes。用/g表示全局匹配。或者/i大小写匹配

// /g参数
var str="Visit Microsoft Microsoft!";
str = str.replace(/Microsoft/g,"W3School");
console.log(str);
//输出Visit W3School W3School!

// /i参数
//未增加/i时，完全大小写匹配
var str="Visit Microsoft microsoft!";
str = str.replace(/Microsoft/g,"W3School");
console.log(str);
//输出Visit W3School microsoft!

//增加/i时，忽略大小写
var str="Visit Microsoft microsoft!";
str = str.replace(/Microsoft/gi,"W3School");
console.log(str);
//输出Visit W3School W3School!

正则表达式可以使用任意规则组成。例如我们想将所有的单词都换成统一的单词。例如如下：

//将所有的单词替换成word
var str="Visit Microsoft Microsoft!";
str = str.replace(/\w+/gi,"word");
console.log(str);
//输出word word word!

//将所有以M开头的单词替换成word。小写的m开头不替换
var str="Visit Microsoft microsoft!";
str = str.replace(/M\w+/g,"word");
console.log(str);
//输出Visit word microsoft!

2.2、replacement参数说明：

replacement是用于替换匹配到的字符串。这个参数类型可以是字符串用于替换匹配到的文本，也可以是一个函数用于处理匹配到的字符串并返回。其中如果是字符串的时候有一个符号$，这个符号具有特殊意义，可以把他当做转义字符来理解

2.2.1、字符串类型特殊符号

$&：这个符号表示正则表达式匹配的字符串，我们可以在replacement参数的字符串里面加入这个符号来构造一个新的用于替换的字符串。例如下面这个例子，我们可以在所有的单词后面加入一个后缀_myword。

var str="Visit Microsoft microsoft!"
str = str.replace(/\w+/g,'$&_myword');
console.log(str);
//输出内容为Visit_myword Microsoft_myword microsoft_myword!

$`: 这个表示匹配到的字符串的左侧的文本

$' :这个表示匹配到的字符串的右侧的文本

var str="Visit Microsoft microsoft!"
str = str.replace(/Microsoft/gi,'$`_myword');
console.log(str);
//输出内容为_myword Visit _myword Visit Microsoft _myword!



var str="Visit Microsoft microsoft!"
str = str.replace(/Microsoft/gi,"$'_myword");
console.log(str);
//输出内容为Visit microsoft!_myword !_myword!

$$ :这个就是表示插入一个$符号。跟\\类似

$1 、$2.....$99 这个表示与 regexp 中按照从左到右的顺序的第 1 到第 99 个子表达式相匹配的文本。这个我个人认为比较不好理解，参考文档里面写的也不是很清楚，这边着重讲一下。这边需要注意的是，这个里面所谓的子表达式是用括号()包起来的算一个子表达式，并且需要在完整的正则表达式匹配到的情况下，才能取到$1、$2....。话不多说。直接上例子

//例子1
var str="Visit Microsoft go microsoft!"
str = str.replace(/(M\w+)\s(go)\s(m\w+)/, "$2 $1 $3");
console.log(str);
//此处输出Visit go Microsoft microsoft!


//例子2
var str="Visit Microsoft go microsoft!"
str = str.replace(/(M\w+)(go)(m\w+)/, "$2 $1 $3");
console.log(str);
//此处输出Visit Microsoft go microsoft!


//例子3
var str="Visit Microsoft go microsoft!"
str = str.replace(/M\w+\s(go)\s(m\w+)/, "$2 $1 $3");
console.log(str);
//此处输出Visit microsoft go $3!

大家可以看到。上面三个例子输出完全不一样，那是因为匹配的规则不一样

例子1：由于/(M\w+)\s(go)\s(m\w+)/这个正则表达式可以完整匹配到Microsoft go microsoft这个字符串的(\s表示空白字符)。所以我们的$1 $2 $3都可以取到。$1=Microsoft $2=go $3=microsoft 然后最终将Microsoft go microsoft 这个字符串替换成go Microsoft microsoft。得到上面的输出。

例子2：在这个例子中。每个()内部的都能匹配到一个字符串，但是合起来不能完整匹配。因为中间少了两个空白字符串。所以认为都没找到，返回原来的字符串

例子3：而在这个例子中，与例子1的区别就是M\w+这个表达式没有加()。而正是因为这个区别。我们匹配到的第一个子字符串认为是"go"，而不是Microsoft，但是要注意：虽然没加括号，但是实际整个字符串还是有匹配到的。所以是整个"Microsoft go microsoft"都被替换掉，只不过在替换的字符串中$3没有实际的变量，所以直接以$3输出

总结起来：使用$1、$2...$99的时候，需要在正则表达式完全匹配到的情况下才能获取到子表达式的内容，并且子表达式需要用()包括起来才可以

2.2.2：函数

replacement这个参数除了是字符串以外，还可以是一个函数。可以用于处理匹配到的字符串

var str="Visit Microsoft go microsoft!"
str = str.replace(/(M\w+)\s(go)\s(m\w+)/, function(word){
	return word.substring(0,4).toUpperCase()+word.substring(4);
});
console.log(str);
//此处输出Visit MICRosoft go microsoft!

上面例子比较好理解。就是将匹配的字符串的前面4个字符全部变成大写，然后返回

至此：对于js的replace这个函数的记录就结束了

参考资料：

https://www.w3school.com.cn/jsref/jsref_replace.asp

https://www.w3school.com.cn/jsref/jsref_obj_regexp.asp