• 全面解析JS字符串和正则表达式中的match、replace、exec等函数


    转自:https://www.jb51.net/article/87730.htm

    正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。

    正则表达式由于不经常使用,所以容易经常忘记,下面小编把常用的函数和功能,简明扼要的罗列在此,以备日后查看:

    RegExp对象的函数常用的有2个

    1、test函数

    用法:RegExpObject.test(string)

    返回:如果字符串 string 中含有与 RegExpObject 匹配的文本,则返回 true,否则返回 false。

    描述:这个方法没有什么特殊之处,对修饰符g没有什么特殊处理

    示例:

    1
    2
    3
    var reg = /a=1/;
    console.log(reg.test(url)); // 输出结果为 true

    2、exec函数

    用法:RegExpObject.exec(string)

    返回:返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。

    描述:

    exec() 方法的功能非常强大,它是一个通用的方法,而且使用起来也比 test() 方法以及支持正则表达式的 String 对象的方法更为复杂。

    如果 exec() 找到了匹配的文本,则返回一个结果数组。否则,返回 null。此数组的第 0 个元素是与正则表达式相匹配的文本,第 1 个元素是与 RegExpObject 的第 1 个子表达式相匹配的文本(如果有的话),第 2 个元素是与 RegExpObject 的第 2 个子表达式相匹配的文本(如果有的话),以此类推。除了数组元素和 length 属性之外,exec() 方法还返回两个属性。index 属性声明的是匹配文本的第一个字符的位置。input 属性则存放的是被检索的字符串 string。我们可以看得出,在调用非全局的 RegExp 对象的 exec() 方法时,返回的数组与调用方法 String.match() 返回的数组是相同的。

    但是,当 RegExpObject 是一个全局正则表达式时,exec() 的行为就稍微复杂一些。它会在 RegExpObject 的 lastIndex 属性指定的字符处开始检索字符串 string。当 exec() 找到了与表达式相匹配的文本时,在匹配后,它将把 RegExpObject 的 lastIndex 属性设置为匹配文本的最后一个字符的下一个位置。这就是说,您可以通过反复调用 exec() 方法来遍历字符串中的所有匹配文本。当 exec() 再也找不到匹配的文本时,它将返回 null,并把 lastIndex 属性重置为 0。

    示例:

    正则表达式带修饰符g

    1
    2
    3
    4
    5
    6
    7
    8
    var reg = /([^?&=]+)=([^?&=])*/g;
    console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]
    console.log(reg.exec(url)); //["b=2", "b", "2", index: 25, input: "http://www.baidu.com?a=1&b=2&c=3"]
    console.log(reg.exec(url)); //["c=3", "c", "3", index: 29, input: "http://www.baidu.com?a=1&b=2&c=3"]
    console.log(reg.exec(url)); //null
    reg.lastIndex = 0; //这段代码很重要哦,注意理解
    console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: http://www.baidu.com?a=1&b=2&c=3]

    正则表达式不带修饰符g

    1
    2
    3
    4
    5
    6
    7
    8
    var reg = /([^?&=]+)=([^?&=])*/g;
    console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]
    console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]
    console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]
    console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]
    reg.lastIndex = 0;
    console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: <a href="http://www.baidu.com?a=1&b=2&c=3">http://www.baidu.com?a=1&b=2&c=3</a>]

    发现不一样的地方了吗,把函数描述好好读一遍,就明白了^_^

    String对象的函数支持正则的有4个,我们只说其中的2个

    1、match函数

    用法:stringObject.match(searchvalue | regexp),这里我们只说regexp模式

    返回值:存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。

    描述:

    match() 方法将检索字符串 stringObject,以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。

    如果 regexp 没有标志 g,那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本, match() 将返回 null。否则,它将返回一个数组,其中存放了与它找到的匹配文本有关的信息。该数组的第 0 个元素存放的是匹配文本,而其余的元素存放的是与正则表达式的子表达式匹配的文本。除了这些常规的数组元素之外,返回的数组还含有两个对象属性。 index 属性声明的是匹配文本的起始字符在 stringObject 中的位置,input 属性声明的是对 stringObject 的引用。

    如果 regexp 具有标志 g,则 match() 方法将执行全局检索,找到 stringObject 中的所有匹配子字符串。若没有找到任何匹配的子串,则返回 null。如果找到了一个或多个匹配子串,则返回一个数组。不过全局匹配返回的数组的内容与前者大不相同,它的数组元素中存放的是 stringObject 中所有的匹配子串,而且也没有 index 属性或 input 属性。

    示例:

    不带修饰符g

    1
    2
    3
    4
    5
    6
    var reg = /([^?&=]+)=([^?&=])*/;
    var result = url.match(reg);
    console.log(result); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]
    console.log(result.index); //21
    console.log(result.input); //http://www.baidu.com?a=1&b=2&c=3

    带修饰符g

    1
    2
    3
    4
    5
    6
    var reg = /([^?&=]+)=([^?&=])*/g;
    var result = url.match(reg);
    console.log(result); //["a=1", "b=2", "c=3"]
    console.log(result.index); //undefined
    console.log(result.input); //undefined

    发现不一样的地方了吗,把函数描述好好读一遍,就明白了^_^

    2、replace函数

    用法:stringObject.replace(regexp/substr,replacement)

    返回值:一个新的字符串,是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。

    描述:字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串,然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g,那么 replace() 方法将替换所有匹配的子串。否则,它只替换第一个匹配子串。

    replacement 可以是字符串,也可以是函数。如果它是字符串,那么每个匹配都将由字符串替换。但是 replacement 中的 $ 字符具有特定的含义。如下表所示,它说明从模式匹配得到的字符串将用于替换。

    字符替换文本
    $1、$2、...、$99 与 regexp 中的第 1 到第 99 个子表达式相匹配的文本。
    $& 与 regexp 相匹配的子串。
    $` 位于匹配子串左侧的文本。
    $' 位于匹配子串右侧的文本。
    $$ 直接量符号。(意思就是要替换为 $ 符号的时候,就写两个$)

    示例:

    不带修饰符g

    1
    2
    3
    4
    5
    6
    7
    var reg = /([^?&=]+)=([^?&=])*/;
    var url1 = url.replace(reg,function(a,b,c,d,e){
    console.log(a,b,c,d,e); //a=1, a, 1, 21, http://www.baidu.com?a=1&b=2&c=3
    return 'ok';
    })
    console.log(url1); //http://www.baidu.com?ok&b=2&c=3

    带修饰符g

    1
    2
    3
    4
    5
    6
    7
    var reg = /([^?&=]+)=([^?&=])*/g;
    var url1 = url.replace(reg,function(a,b,c,d,e){
    console.log(a,b,c,d,e); //执行3次,分别输出为:a=1, a, 1, 21, http://www.baidu.com?a=1&b=2&c=3 和 b=2, b, 2, 25, http://www.baidu.com?a=1&b=2&c=3 和 | c=3, c, 3, 29, http://www.baidu.com?a=1&b=2&c=3
    return 'ok';
    })
    console.log(url1); //http://www.baidu.com?ok&ok&ok

    第二个参数为字符串时

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    var reg = /([^?&=]+)=([^?&=])*/; //不带修饰符g
    var url1 = url.replace(reg,"$&")
    var url1 = url.replace(reg,"$1")
    console.log(url1); //http://www.baidu.com?a&b=2&c=3
    var url1 = url.replace(reg,"$2")
    console.log(url1); //http://www.baidu.com?1&b=2&c=3
    var url1 = url.replace(reg,"$'")
    var reg = /([^?&=]+)=([^?&=])*/g; //带修饰符g
    var url1 = url.replace(reg,"$&")
    var url1 = url.replace(reg,"$1")
    console.log(url1); //http://www.baidu.com?a&b&c
    var url1 = url.replace(reg,"$2")
    console.log(url1); //http://www.baidu.com?1&2&3
    var url1 = url.replace(reg,"$'")
  • 相关阅读:
    1082 射击比赛 (20 分)
    1091 N-自守数 (15 分)
    1064 朋友数 (20 分)
    1031 查验身份证 (15 分)
    1028 人口普查 (20 分)
    1059 C语言竞赛 (20 分)
    1083 是否存在相等的差 (20 分)
    1077 互评成绩计算 (20 分)
    792. 高精度减法
    791. 高精度加法
  • 原文地址:https://www.cnblogs.com/sharpest/p/10161696.html
Copyright © 2020-2023  润新知