• javascript中replace还可以这样玩


    一:常规操作

    在平时开发中用replace时,无非就是匹配一个字符串,然后替换成要换的,例如↓

    "1,2,32".replace(',', '-')
    //"1-2,32"
    "1,2,32".replaceAll(',', '-')
    //"1-2-32"
    

      同样也可以用正则

    "1,2,32".replace(/,/, '-')
    // "1-2,32"
    "1,2,32".replace(/,/g, '-')
    //"1-2-32"  加了g就和replaceAll一样的功能了

    二:$1-9分组操作

     除了我们经常使用的replace()形式stringObject.replace(regexp/substr,replacement)

    第二个参数也可以是$1-$9,在替换文本里, 脚本用 $1 和 $2 表示正则表达式中的小括号匹配项的结果

    看例子↓

    var re = /(w+)s(w+)/;
    var str = 'John Smith';
    str.replace(re, '$2, $1'); // "Smith, John"
    RegExp.$1; // "John"
    RegExp.$2; // "Smith"
    

     $1就是对应正则里第一个小括号匹配的值,后面以此递增

    那如果我们多写了一个呢,看下↓

    str.replace(re, '$2, $1, $3')
    // "Smith, John, $3"
    

      他就会以字符串的形式替换上,没有对应的匹配内容,因为前面正则只有两个小括号分组

     

    三:函数操作

    replace方法的第二个参数也可以是一个函数,形如:

    stringObject.replace(regexp/substr,function(){});

    这个函数应该有个return值,表示应该被替换的匹配项。

    下面会根据正则的匹配项和捕获组,分2种情况,总结第二个参数function的具体用法。

    情况1.当只有一个匹配项的(即与模式匹配的字符串)情况下,会向该函数传递三个参数:模式的匹配项,模式匹配项在字符串中的位置和原始字符串,形如:

    stringObject.replace(
    	regexp/substr,
    	function(match,pos,originalText){}
    );
    

      例子↓

    var str = "{a},{b}";
    str.replace(/{w+}/g,(match,pos,original)=>{
    	console.log(match);
    	console.log(pos);
    	console.log(original)
    })
    
    输出结果是:
    {a}
    0
    {a},{b}
    {b}
    4
    {a},{b}
    

      情况2.在正则表达式中定义了多个捕获组的情况下,传递给函数的参数依次是模式的匹配项,第一个捕获组的匹配项,第二个捕获组的匹配项……,但是,最后两个参数依然是模式的匹配项在字符串中的位置和原始字符串。

    例子↓

    var str = "{a},{b}";
    str.replace(/{(w+)}/g,(match,capture,pos,original)=>{
    	console.log(match);
    	console.log(capture);
    	console.log(pos);
    	console.log(original)
    })
    
    输出结果是:
    {a}
    a
    0
    {a},{b}
    {b}
    b
    4
    {a},{b}
    

      其实我们还可以用es6的新语法这样写↓

  • 相关阅读:
    第一章 数据库概论
    规范化
    qt mysql驱动问题解绝
    linux文件系统软链接硬链接
    linux命令总结
    shell应用技巧
    如何使滚动条保持在页面底部
    地图定位问题汇总
    webpack基本用法
    git异常操作解决办法合集
  • 原文地址:https://www.cnblogs.com/bobo1/p/13298042.html
Copyright © 2020-2023  润新知