JavaScript学习之正则表达式

2018-10-12 admin

如何创建正则表达式

  • 字面量创建var r = /a/;
  • 通过构造函数var r = new RegExp("a");

正则表达式实例属性及方法

  • 三个修饰符属性,只读不可修改

  • RegExp.prototype.ignoreCase 正则表达式是否添加了忽略大小写的修饰符,返回一个布尔值

    var r = /asd/i;
    console.log(r.ignoreCase);    //true
    
  • RegExp.prototype.global 正则表达式是否添加了全局匹配的修饰符,返回一个布尔值

    var r = /asd/i;
    console.log(r.global);    //true    
    
  • RegExp.prototype.multiline 正则表达式是否添加了换行的修饰符,返回一个布尔值

    var r = /asd/m;    
    console.log(r.multiline);    //true    
    
  • RegExp.prototype.lastIndex 返回一个整数,表示正则表达式下一次开始匹配的位置,

    var s = "wqerqt";
    var r = /q/g;
    console.log(r.lastIndex);   //0
    console.log(r.test(s));     //true
    console.log(r.lastIndex);   //2
    console.log(r.test(s));     //true
    
  • RegExp.prototype.source 返回正则表达式的字符串形式;即不包括首尾的/

  • 两个实例方法

  • RegExp.prototype.test() 作用是否能匹配参数字符串,返回一个布尔值

    console.log(/as/.test("fdas"));   //true
    console.log(/as/.test("fd"));   //false
    

    test()方法在全局g的匹配下,会记录上一次test()后开始的位置,来进行下一次test(); 可以这么来理解lastIndex用来指定test()开始的位置,lastIndex只对同一个正则表达式有连续有效的作用,例如重新创建正则表达式,会一直返回true或者false

    var i = 3,
        r = /as/g;
    while(i) {
        console.log(r.test("asd"));
        i --;
    }                          //true false true
    

    下面三种结果相同都是true,相当于新的正则表达式在匹配字符串,只是正则表达式是一样的

    var i = 3,
    while(i) {
        //r = new RegExp("as","g");
        //r = /as/g;    
        console.log(/as/g.test("asd"));
        i --;
    }                          //true true true
    
    

    所以个人认为在外部定义正则表达式,内部引用会好点

  • RegExp.prototype.exec() 作用是返回一个数组,成员是匹配成功的字符串,否则返回null 但是数组的长度是组匹配数再加1,例如下面例子的,数组长度只有1

    var r = /as/g;
    console.log(r.exec("asdas"));   //["as", index: 0, input: "asdas", groups: undefined]
    console.log(r.exec("asdas"));   //["as", index: 3, input: "asdas", groups: undefined]
    console.log(r.exec("adsd"));    //null
    

    返回数组结果还有两个属性: index:返回匹配时的位置 input:返回参数字符串

    var r = /as/g;
    var arr = r.exec("asdas");
    console.log(arr.index, arr.input);     //0,"asdas"
    var arr1 = r.exec("asdas");
    console.logarr1.index, arr1.input);   //3,"asdas"    
    

匹配规则

详情可看MDN文档

几个值得记忆的点: (.):任意字符,除了rn\u2028u2029的所有单个字符,大于u0xFFFF的两个字符也不行

o\bo:不存在这样的单词进行匹配 +:{1,+Infinity},取尽可能大,+?则是取尽可能小,最小为1 :{0,+Infinity},取尽可能大,?则是取尽可能小,最小为0 ?:{0,1},取尽可能大,最大为1,??则是取尽可能小,最小为0

组匹配

就是用来捕获自己想要的值,用来自己进行后续操作

var a = /-(\w)/g; console.log(‘get-own-property-name’.replace(a,function (match, $1) { return $1.toUpperCase(); })); //getOwnPropertyName

match:匹配成功的字符串
$1:是第一个组匹配的值,例如后面多个括号则是$2$3...
注意组匹配嵌套时的顺序`console.log("bc".replace(/((b)c)/g,"$1+$2")); //bc+b`从左开始,而不是从内开始
字符串的match与split在进行组匹配时,是否添加修饰符g结果不一样

console.log(“abc”.match(/(.)b/g)); //[“ab”] console.log(“abc”.match(/(.)b/)); //(2) [“ab”, “a”, index: 0, input: “abc”, groups: undefined] console.log(“abc”.split(/(b)/)); // [“a”, “b”, “c”] console.log(“abc”.split(/b/)); //[“a”, “c”]

总结:match方法只要进行了g全局匹配就只会返回最终匹配到的字符串组成的数组;split只要进行了组匹配就会返回捕获的内容

  • 非捕获组 用?:表示;说直白点就是:还是这么匹配但是我不返回括号里的内容,所以我们进行split的组匹配时可以进行修改console.log("abc".split(/(?:b)/)); //["a", "c"]

  • 先行断言 用x(?=y)表示,意思是匹配一个x,x必须在y前面,结果中不返回y

  • 先行否定断言 用x(?!y)表示,意思是匹配一个x,x后面不能是y,结果中不返回y

  • 后行断言 用(?<=y)x表示,意思是匹配一个x,x前面必须是y,结果中不返回y

  • 后行否定断言 用x(?<!=y)表示,意思是匹配一个x,x前面不能是y,结果中不返回y

    console.log(/(?<!=b)a/.exec("bcaba"));  //["a", index: 2, input: "bcaba", groups: undefined]
    console.log(/(?<=b)a/.exec("bcaba"));   //["a", index: 4, input: "bcaba", groups: undefined]
    

经典例子:

数字格式化:

var r = /\B(?=((\d{3})+$))/g;
console.log('1234567890'.replace(r, '.'));    //1.234.567.890
console.log('123'.replace(r, '.'));           //123

原文链接:https://segmentfault.com/a/1190000016663315

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-42533.html

文章标题:JavaScript学习之正则表达式

相关文章
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 &lt;span id=“mt9” class=“sent...
2015-11-12
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
7个提高效率的JavaScript调试工具
鐜板湪鐨凧avaScript浜嬪疄涓婂凡鐒舵垚涓轰簡娴佽�岀殑web璇�瑷€锛屽嵆浣垮畠骞朵笉瀹岀編銆傚緢澶氱▼搴忓憳涓嶅枩娆㈢敤JavaScript鍐欎唬鐮侊紝鏄�鍥犱负鍐欏埌鍚庢潵鎬讳細鍑虹幇鍚勭�嶈帿鍚嶅叾濡欑殑bug锛岃€屼笖鍦ㄥ紑...
2015-11-11
回到顶部