首页 > 编程语言 >精通正则表达式- JavaScript的实现和应用

精通正则表达式- JavaScript的实现和应用

时间:2022-11-25 17:35:56浏览次数:37  
标签:精通 console log 正则表达式 JavaScript matches 匹配 reg const

1. 正则表达式对象

  • 模式
    / pattern /flags
  • pattern 是任何简单或复杂的正则表达式,可以包含字符类,限定符,分组,向前查找以及反向引用。
  • flags 是匹配模式标明正则表达式的行为
    g: 表示全局模式, 模式被应用于所有字符串,而非在发现第一个匹配项时立即停止。
    i: 表示不区分大小写, 确定匹配项时忽略模式与字符串的大小写。
    m: 表示多行模式, 即在达到一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。
  • 元字符
    ^ $ . * + ? = ! : | \ / () [] {}
    如果要将这些元字符当作普通字符使用,则必须对它们进行转义。

  • 字符类

[...]   位于括号之内的任意字符
[^...]  不在括号之内的任意字符
.       除换行符和其他Unicode行终止符号之外的任意字符
\w      任何ASCII单子字符,等价于[a-zA-Z0-9_]
\W      任何非ASCII单子字符,等价于[^a-zA-Z0-9_]
\s      任何Unicode空白符
\S      任何非Unicode空白符的字符
\d      任何ASCII数字,等价于[0-9]
\D      除了ASCII数字之外的任何字符,等价于[^0-9]
[\b]    退格直接量
  • 量词
{n, m} 匹配前一项至少n次,但是不超过m次
{n, }  匹配前一项n次,或更多次
{n}    匹配前一项恰好n次
?      匹配前一项0次或1次,也就是说前一项是可选。等价于{0, 1}
+      匹配前一项1次或多次。等价于{1, }
*      匹配前一项0次或多次。等价于{0, }
  • 选择,分组和引用
|       选择: 匹配的是该符号左边的子表达式或右边的子表达式
(...)   组合: 将几个项目组合为一个单元,并捕获这个组合匹配的字符以供后面引用
(?:...) 只组合,不捕获
\n      引用第n个分组匹配的字符,组号是从左到右计数的左括号数,以(?: 形式分组的不计入编号
  • 锚字符(匹配指定的位置)
^     匹配字符串的开头,在多行检索中,匹配一行的开头
$     匹配字符串的结尾,在多行检索中,匹配一行的结尾
\b    匹配一个词语的边界, 在字符组中则表示一个退格符 [\b]
\B    匹配非词语边界的位置
(?=p) 肯定顺序环视,要求接下来的字符都与模式p匹配,但不占用字符
(?!p) 否定顺序环视,要求接下来的字符不与模式p匹配,且不占用字符

2. 对象字面量方式创建正则表达式对象

const reg = /at/g

// 匹配字符串中所有"at"
const reg = /at/g 
// 匹配第一个"bat" 或者 "cat", 不区分大小写
const reg = /[bc]at/i;
// 匹配第一个"[bc]at", 不区分大小写 
const reg = /\[bc\]at/i;
// 匹配所有以"at"结尾的3个字符组合,不区分大小写
const reg = /.at/gi; 

3. RegExp 构造函数创建正则表达式对象

const reg = new RegExp("at", "g")

// 匹配第一个"bat" 或者 "cat", 不区分大小写
const reg = new RegExp("[bc]at", "i");

RegExp构造函数的两个参数都是字符串,在某些情况下需要对第一个模式参数进行双重转义。
从下面的对比可以看出,字面量模式更加间接,和易用使用。

字面量模式       等价的字符串
/\[bc\]at/       "\\[bc\\]at"
/\.at/           "\\.at"
/name\/age/      "name\\/age"
/\d.\d{1,2}/     "\\d.\\d{1,2}"
/\w\\hello\\123/ "\\w\\\\hello\\\\123"

4. 正则表达式对象的方法

  • exec 方法
    1. exec()接受一个字符串参数,然后返回包含第一个匹配项信息的数组,
      或者在没有匹配项的情况下返回null。
    2. 数组包含index和input两个属性,index表示匹配项在字符串中的位置,
      input则表示应用正则表达式 的字符串。
    3. 数组中第一项是与整个模式匹配的字符串,其他项是与模式中的捕获组匹配的字符串。
      如果模式中没有捕获组,则数组只包含一项。
const text = "mom and dad and baby";
const reg = /mom( and dad( and baby)?)?/gi;
const matches = reg.exec(text);

console.log(matches[0]); // "mom and dad and baby"
console.log(matches[1]); // " and dad and baby"
console.log(matches[2]); // " and baby"
console.log(matches.index); // 0
console.log(matches.input); // "mom and dad and baby"

注意:

  • 对于exec()方法而言,即使在模式中设置了全局标志(g),它每次也只返回一个匹配项。
  • 在不设置全局标志的情况下,在同一个字符串上多次调用exec()将始终返回第一个匹配项
    的信息。
  • 在设置全局标志的情况下,每次调用exec()则会在字符串中继续查找新匹配项。
const text = 'cat, bat, sat, fat';
/** no flag 'g' **/
let reg = /.at/;
let matches = reg.exec(text);
console.log(matches[0]); // "cat"
console.log(matches.index); // 0
console.log(reg.lastIndex); // 0

matches = reg.exec(text);
console.log(matches[0]); // "cat"
console.log(matches.index); // 0
console.log(reg.lastIndex); // 0

/** has flag 'g' **/
let reg = /.at/g;
let matches = reg.exec(text);
console.log(matches[0]); // "cat"
console.log(matches.index); // 0
console.log(reg.lastIndex); // 3

matches = reg.exec(text);
console.log(matches[0]); // "bat"
console.log(matches.index); // 5
console.log(reg.lastIndex); // 8

遍历正则表达式在全局模式匹配下的每一项

const text = 'cat, bat, sat, fat';
const reg = /.at/g;
let matches = null;
while ((matches = reg.exec(text)) !== null){
  console.log(matches[0]);
  console.log(matches.index);
  console.log(reg.lastIndex);
}
  • test 方法
    1. 它接受一个字符串参数,匹配的情况下返回true否则返回false
    2. 在非全局模式下,每次执行test 方法后,正则表达式对象的lastIndex被重设为0, 表示下次执行从头开始
    3. 在全局模式下,每次执行test 方法后,正则表达式对象的lastIndex被设置为紧接着匹配之后那个字符的位置,
      表示下次执行时从匹配之后的位置开始匹配。
const text = 'cat, bat, sat, fat';
/** no flag 'g' **/
let reg = /.at/;
let result  = reg.test(text);
console.log(result); // true
console.log(reg.lastIndex); // 0
result  = reg.test(text);
console.log(result); // true
console.log(reg.lastIndex); // 0

/** has flag 'g' **/
let reg = /.at/g;
let result  = reg.test(text);
console.log(result); // true
console.log(reg.lastIndex); // 3
result  = reg.test(text);
console.log(result); // true
console.log(reg.lastIndex); // 8

注意:
使用一个全局模式的正则表达式去匹配多个字符串时,在匹配一个新字符串前需要确保
正则表达式对象的lastIndex属性为0, 否则在匹配字符串时就会从新字符串的某个中间
位置开始匹配,导致匹配错误。

如果lastIndex属性没有设置为0,则匹配text2时,第一次会匹配到fat而不是预期的sat

const text1 = 'cat, bat';
const text2 = 'sat, fat';
const reg = /.at/g;
const matches1 = reg.exec(text1);
console.log('matches1', matches1[0]); //cat
console.log(reg.lastIndex);
// reg.lastIndex = 0;
const matches2 = reg.exec(text2);
console.log('matches2', matches2[0]); //fat

5. 正则表达式对象属性

  • global: 布尔值,表示是否设置了g 标志
  • ignoreCase: 布尔值, 表示是否设置了i标志
  • lastIndex: 整数,表示开始搜索下一个匹配项的字符位置,从0算起。
  • multiline: 布尔值,表示是否设置了m标志
  • source: 正则表达式的字符串表示,按照字面量模式返回的字符串而非构造函数参数的字符串模式。
const reg = /\[bc\]at/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);    // "\[bc\]at"

标签:精通,console,log,正则表达式,JavaScript,matches,匹配,reg,const
From: https://www.cnblogs.com/xiaodi-js/p/16925808.html

相关文章

  • JavaScript 基础
    JavaScript使用JS的几种写法行内式的js直接写道元素的内部​​<buttontype="button"value="须弥"onclick="alert('纳西妲')"></button>​​内嵌式js引入式​​<scripts......
  • Python正则表达式
    在登录某些网站时,需要填写邮箱等相关信息,在邮箱格式填错时,页面总能第一时间检出并告知用户邮箱格式有误,那么程序员是使用什么方法实现这种检测的呢?一般会使用正则表达式。正......
  • 想靠Python制作报表?入门不易精通难!还是这个工具操作简单
    Python有多火热,不需要我罗列具体的数据,仅大家回想下见过多少广告就知道。Python最初是由数据分析带起来的,号称自动化办公,表格处理,数据分析,图表制作吸引了一大波人。不过等真......
  • 如何用jQuery / Javascript播放二进制MP3流?
    我从ajax调用​中获得了纯二进制MP3流.没有标题,没有.只是直接MP3位.(实际上甚至连一条流都没有?)我希望能够在网页上播放它(如果可能的话,还可以提供下载).这可能吗?如果是......
  • 如何用jQuery / Javascript播放二进制MP3流?
    我从ajax调用中获得了纯二进制MP3流.没有标题,没有.只是直接MP3位.(实际上甚至连一条流都没有?)我希望能够在网页上播放它(如果可能的话,还可以提供下载).这可能吗?如果是这......
  • JavaScript中类型转换
    原文链接:https://zhuanlan.zhihu.com/p/516440022一、概述前面我们讲到,JS中有六种简单数据类型:undefined、null、boolean、string、number、symbol,以及引用类型:obj......
  • 45个超实用的JavaScript技巧及最佳实践 一 (收藏)
    1.第一次给变量赋值时,别忘记var关键字如果初次赋值给未声明的变量,该变量会被自动创建为全局变量,在​​JS​​开发中,应该避免使用全局变量,这是大家容易忽略的错误。2.使用===......
  • 45个超实用的JavaScript技巧及最佳实践(二)
    45个超实用的JavaScript技巧及最佳实践(一)21.使用逻辑AND/OR来处理条件语句varfoo=10;foo==10&&doSomething();//isthesamethingasif(foo==10)doSomething......
  • JavaScript的this指向
    1、结论:js中的this是当前方法所属的对象 'usestrict'letobj={name:'taotao',myName(){returnthis}}console.log(obj.myName())//{nam......
  • javascript:void() 和 herf="#" 区别
    javascript:void(0)和herf="#"区别本文内容参考菜鸟教程(大部分都是原文内容)原文地址javascript:void(0)的含义我们经常会使用到javascript:void(0)这样的代码......