专栏首页前端进阶javascript正则表达式RegExp再次研究-replace

javascript正则表达式RegExp再次研究-replace

原文链接

昨天说了几个RegExp的几个实例属性

  • global 标示正则表达式是否指定了全局模式g(只读)
  • ignoreCase 标示正则表达式是否指定了不区分大小写模式i(只读)
  • mutiline 标示正则表达式是否指定了多行模式m(只读)
  • lastIndex 如果使用了全局模式,这个变量保存的是在字符串中尝试下次的匹配的偏移值,在test()和exec()中会用到这个值(可写)
  • source 返回创建RegExp对象实例时指定的表达式文本字符串。(只读)

虽然有那么多属性,但是基本用不到,为什么呢?因为这些信息都包含在模式声明中了: 字面量创建的正则

var reg = /\[abc\]de/i
console.log(reg.global);//=>false
console.log(reg.ignoreCase);//=>true
console.log(reg.multiline);//=>false
console.log(reg.lastIndex);//=>0
console.log(reg.source);//=>\[abc\]de

通过RegExp构造函数创建的也是一样的结果

  var reg2 = new RegExp("\\[bc\\]at","i")
  console.log(reg2.global);//=>false
  console.log(reg2.ignoreCase);//=>true
  console.log(reg2.multiline);//=>false
  console.log(reg2.lastIndex);//=>0
  console.log(reg2.source);//=>\[abc\]de

replace

说到正则表达式,不得不提replace stringObject.replace(regexp/substr,replacement)

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

返回一个新的字符串,是用 参数2 替换了 参数1 的第一次匹配或所有匹配之后得到的。

  • $1、$2、...、$99 与 regexp 中的第 1 到第 99 个子表达式相匹配的文本。
  • $& 与 regexp 相匹配的子串。
  • $` 位于匹配子串左侧的文本。
  • $' 位于匹配子串右侧的文本。
  • $$ 直接量符号。

replace例一:匹配一次,区分大小写

    var aStr = "Hello 陌上寒!"
    var bStr = aStr.replace("陌上寒", "正则表达式")
    console.log( bStr)//=>Hello 正则表达式!

replace例二:全局匹配

    var cStr =`你好 陌上寒! 我是陌上寒,我们一起来交流讨论前端,每天更新,欢迎关注`
    var dStr = cStr.replace(/陌上寒/g, "moshanghan")
    console.log(dStr)//=>你好 moshanghan! 
     //=>我是moshanghan,我们一起来交流讨论前端,每天更新,欢迎关注

replace例三:忽略大小写,匹配一次

var cStr ="我是 Moshanghan! moshanghan是我"
var dStr = cStr.replace(/moshanghan/i, "陌上寒")
console.log(dStr)//=>我是 陌上寒! moshanghan是我

replace例四:忽略大小写,全局匹配

var cStr ="我是 Moshanghan! moshanghan是我"
var dStr = cStr.replace(/moshanghan/ig, "陌上寒")
console.log(dStr)//=>我是 陌上寒! 陌上寒是我

加点难度 replace例五:hello, moshanghan转换为moshanghan hello 以下的输出是相同的

var name = "hello, moshanghan";
var a = name.replace(/(\w+)\s*,\s*(\w+)/, "$2 $1");
console.log(a);//=>moshanghan hello
var b = name.replace(/(\w+)\s*, (\w+)\s*/, "$2 $1");
console.log(b);//=>moshanghan hello
var c = name.replace(/(\w+), (\w+)/, "$2 $1");
console.log(c);//=>moshanghan hello
var d = name.replace(/(\w*), (\w*)/, "$2 $1");
console.log(d);//=>moshanghan hello

replace例六:

var name = `"a", "b"," dd"`;
var aa = name.replace(/"([^"]*)"/, "'$1'");
console.log(aa); //=>'a', "b"," dd"
console.log(/"([^"]*)"/g.test(name)); 

replace例七:

var name = 'aaa bbb ccc';
var uw = name.replace(/\b\w+\b/g, function (word) {
    return word.substring(0, 1).toUpperCase() + word.substring(1);
});
console.log(uw); //Aaa Bbb Ccc

要理解上面的,有几个关于正则的概念需要知道

分组

下面的正则表达式可以匹配kidkidkid:

var b =/kidkidkid/
console.log(b.test('kidkidkid')); //=>true

而另一种更优雅的写法是:

var b =/(kid){3}/
console.log(b.test('kidkidkid')); //=>true

这里由圆括号包裹的一个小整体称为分组。

候选

一个分组中,可以有多个候选表达式,用|分隔:

 var reg = /I love (him|her|it)/;
console.log(reg.test('I love him'));//=>true
console.log(reg.test('I love her'));//=>true
console.log(reg.test('I love it'));//=>true
console.log(reg.test('I love them'));//=>false

捕获与引用

被正则表达式匹配(捕获)到的字符串会被暂存起来。其中,由分组捕获的串会从1开始编号,于是我们可以引用这些串

var reg = /(\d{4})-(\d{2})-(\d{2})/
var date = '2010-04-12'
reg.test(date)
console.log(RegExp.$1);//=>2010
console.log(RegExp.$2);//=>04
console.log(RegExp.$3);//=>12

$1引用了第一个被捕获的串,$2是第二个,依次类推。

嵌套分组的捕获

如果碰到类似/((我) 就 (是 (陌上寒)))/的嵌套分组,捕获的顺序是什么?来试试:

var reg = /((我) 就 (是 (陌上寒)))/
var str = "我 就 是 陌上寒"
reg.test( str ) // true
console.log(RegExp.$1);//=>我 就 是 陌上寒
console.log(RegExp.$2);//=>我
console.log(RegExp.$3);//=>是 陌上寒
console.log(RegExp.$4);//=>陌上寒

规则是以左括号“(”出现的顺序进行捕获

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • javascript正则表达式与字符串

    说到js正则表达式,js的字符串就是一个绕不开的话题 字符串是正则表达的是一种实践 字符串String支持一些支持正则表达式的方法,昨天提到的replace就是...

    陌上寒
  • 从今天起开启对正则表达式的学习

    从今天开始关于webpack的讨论就告一段落了,如果遇到webpack有重大更新,我会随时更新,请对我保持持续关注。 每次遇到与表单验证和校验的相关问题都会很难...

    陌上寒
  • 谈一谈javascript异步

    我们知道JavaScript的单线程的,这与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程...

    陌上寒
  • ES6常用知识点小结

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。

    Krry
  • JS ES各版本特性

    JS包含三个部分:ECMAScript(核心),DOM(文档对象模型),BOM(浏览器对象模型)。ECMAScript是JS语言的基础。 ECMAScript的...

    剑行者
  • 前端day11-JS学习笔记(构造函数、对象的API、作用域、arguments关键字)

    当我们想要创建多个对象时很容易造成代码冗余,那么我们可以使用函数或者自定义构造函数去创建对象。

    帅的一麻皮
  • JavaScript从初级往高级走系列————异步

    上面这个例子中,当执行了alert(1),如果用户不点击确定按钮,console.log(2)是不会执行的。

    FinGet
  • JavaScript异步编程

    平时开发经常会用到js异步编程,由于前端展示页面都是基于网络机顶盒(IPTV的一般性能不太好,OTT较好),目前公司主要采取的异步编程的方式有setTimeou...

    Jack Chen
  • js程序设计02——变量、作用域问题

    首先,ECMAScript中的数据类型分为基本类型、引用类型,基本类型的访问操作是按值的。引用类型的值是保存在内存中的对象,操作对象时,实际上操作的是对象的引用...

    用户1141560
  • 37个JavaScript基本面试问题和解答(建议收藏)

    1、使用typeof bar ===“object”来确定bar是否是一个对象时有什么潜在的缺陷?这个陷阱如何避免?

    用户1272076

扫码关注云+社区

领取腾讯云代金券