replace方法到模板编译

发表于 | 分类于 | 阅读次数
| 字数统计 782 | 阅读时长 3

本文章主要是自己用于熟悉正则的几个方法，并没有如何写正则表达式的内容，如果希望学习写正则匹配的，我也不太会(手动捂脸)

首先让我们先熟悉一个最常见的API——replace()方法

replace不会修改原字符串

语法和参数

1
2
str.replace(regexp|substr, newSubStr|function)

参数名称 参数含义
regexp 一个RegExp 对象或者字符串。该正则所匹配的内容会被第二个参数的返回值替换掉。
substr 一个要被 newSubStr 替换的字符串。其被视为一整个字符串，而不是一个正则表达式。仅仅是第一个匹配会被替换。
newSubStr 用于替换掉第一个参数在原字符串中的匹配部分的字符串。该字符串中可以内插一些特殊的变量名。参考下面的使用字符串作为参数。
function 一个用来创建新子字符串的函数，该函数的返回值将替换掉第一个参数匹配到的结果。参考下面的指定一个函数作为参数。

先看一个最简单的例子

1
2
3
4
let a = "abcd1234".replace("1234","e"); //将字符串"1234"替换为字符"e"
let b = "1234abcd1234".replace(/\d+/g,"e"); //将数字替换为字符"e"
console.log(a); //abcde ,用字符串匹配没想到怎么全局替换，知道的可以告诉一下
console.log(b); //eabcde

但是很多时候纯粹的替换字符的场景比较少，很多时候我们希望将获得到的值经过操作然后替换上去，所以replace()方法也很聪明的提供了回调函数。接下来我们来熟悉下回调函数的参数

先看语法

1
str.replace(regexp, function(match,p1,offset,string){})

再看参数含义

参数名 参数含义
match 匹配的子串，即字符串中那一些符合匹配规则的子字符串（可以理解成“abcd”中的是“bc”）
p1 第一个匹配到的内容
offset 匹配到的子字符串在原字符串中索引。（比如，如果原字符串是“abcd”，匹配到的子字符串是“bc”，那么这个参数将是1）
string 被匹配的原字符串。

其实如果大家之前有用过match这个API的话，就能发现他的形参全部是以match为基础进行实现的

这个时候再来一个简单版的小demo对着看，大家基本上就能明白了

1
2
3
4
5
6
7
8
9
10
11
"strss".replace(/s+/g, function(match,offset,string){
    console.log(match)
    console.log(offset)
    console.log(string)
});
//  s
//  0
//  strss
//  ss
//  3
//  strss

有没有一种ES5数组回调参数的既视感

不过回调函数提供的参数还赋予了更强大的功能，这里我们先暂时略过

发现还是避不过正则表达式匹配的内容

我们可以先在熟悉语法的情况下，一步一步从最基本的方法使用来认识这个方法

因为我们想在最终的替换中进一步转变匹配结果，所以我们必须使用一个函数。