JavaScript Day06 正则表达式详解 1

简介: JavaScript Day06 正则表达式详解

正则表达式

正则表达式(Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

1.什么是正则表达式?

正则表达式是由一个字符序列形成的搜索模式。

当你在文本中搜索数据时,你可以用搜索模式来描述你要查询的内容。

正则表达式可以是一个简单的字符,或一个更复杂的模式。

正则表达式可用于所有文本搜索和文本替换的操作。

2.正则表达式的创建

2.1 字面量(直接量)

// 在一对反斜线中写正则表达式内容,如/abc/
// 正则表达式里面不需要加引号 不管是数字型还是字符串型
var reg = /正则表达式/修饰符;
var reg = /hello/g;

2.2 构造函数

//构造正则表达式的实例,如new RexExp('abc')
//内部传入的参数为字符串/字符串的变量
var reg =new RegExp("正则表达式","修饰符")
var reg =new RegExp("hello","g");

3.字符分类

3.1 普通字符

字母、数字、下划线、汉字、没有特殊含义的符号(,;!@等)

实际上不是特殊字符的字符都是普通字符

3.2 特殊字符

\:将特殊字符转义成普通字符

3.3 模式修饰符

i:ignoreCase,匹配时忽视大小写

m:multiline,多行匹配

g:global,全局匹配

字面量创建正则时,模式修饰符写在一对反斜线后

4.正则表达式实例方法

4.1 exec

可用来匹配字符串中符合正则表达式的字符串

如果匹配到,返回值是一个result数组:

[匹配的内容,index: 在str中匹配的起始位置,input: 参数字符串,groups: undefined]

否则返回null

var str = 'hello world hello';
var reg1 = /hello/;
var reg2 = /hello/g;
var reg3 = /exe/g;
console.log(reg1.exec(str)); //[ 'hello', index: 0, input: 'hello world hello', groups: undefined ]
console.log(reg2.exec(str)); //[ 'hello', index: 0, input: 'hello world hello', groups: undefined ]
console.log(reg3.exec(str)); // null
// 如果是全局模式的正则验证 还可以使用循环进行输出
while(true)
  var result = reg.exec(str);
  if(!result){
    break;
  }
  console.log(result[0],result["index"],reg.lastIndex);
}

注意点:

1)如果正则表达式中有修饰符"g",这时,在正则表达式的实例reg中会维护lastIndex属性,记录下一次开始的位置,当第二次执行exec的时候,从lastIndex开始检索。

2)如果正则表达式中没有修饰符"g",不会维护lastIndex属性,每次执行从开始位置检索

4.2 test

用来测试待检测的字符串中是否有可以匹配到正则表达式的字符串,如果有返回true,否则返回false

var str = 'hello world';
var reg1 = /world/;
var reg2 = /Regex/;
console.log(reg1.test(str)); //返回true
console.log(reg2.test(str)); //返回false

注意点:

1)如果正则表达式中有修饰符"g",这时,在reg中会维护lastIndex属性,记录下一次开始的位置,当第二次执行test的时候,从lastIndex开始检索。

2)如果正则表达式中没有修饰符"g",不会维护lastIndex属性,每次执行从开始位置检索

4.3 toString/toLocaleString

把正则表达式的内容转化成字面量形式字符串/有本地特色的字符串(JS中没效果)

var reg1 = /hello/;
console.log(reg1.toString()); //返回 /hello/ 字符串
console.log(reg1.toLocaleString()); //返回 /hello/ 字符串

4.4 valueOf

返回正则表达式本身

var reg1 = /hello/;
console.log(reg1.valueOf());  // 返回正则表达式本身

5.正则表达式实例属性

5.1 lastIndex

当没设置全局匹配时,该属性值始终为0

设置了全局匹配时,每执行一次exec/test来匹配,lastIndex就会移向匹配到的字符串的下一个位置,当指向的位置后没有可以再次匹配的字符串时,下一次执行exec返回null,test执行返回false,然后lastIndex归零,从字符串的开头重新匹配一轮


可以理解成,每次正则查找的起点就是lastIndex

var str = 'hello hello hello';
var reg1 = /hello/;
var reg2 = /hello/g;
console.log(reg1.lastIndex);  // 0
console.log(reg1.exec(str));  // 返回第一个hello
console.log(reg1.lastIndex);  // 0
console.log(reg2.lastIndex);  // 0
console.log(reg2.exec(str));  // 返回第一个hello
console.log(reg2.lastIndex);  // 5
console.log(reg2.lastIndex);  // 5
console.log(reg2.exec(str));  // 返回第二个hello
console.log(reg2.lastIndex);  // 11
console.log(reg2.lastIndex);  // 11
console.log(reg2.exec(str));  // 返回第三个hello
console.log(reg2.lastIndex);  // 17
console.log(reg2.exec(str));  //返回 null
console.log(reg2.lastIndex);  // 0
console.log(reg2.exec(str));  // 返回第一个hello

5.2 ignoreCase、global、multiline

判断正则表达式中是否有忽略大小写、全局匹配、多行匹配三个模式修饰符

var reg1 = /hello/igm;
console.log(reg1.ignoreCase); //true
console.log(reg1.global); //true
console.log(reg1.multiline);  //true

5.3 source

返回字面量形式的正则表达式(类似于toString)

var reg1 = /hello/igm;
console.log(reg1.source); //hello

6.正则表达式语法-元字符

6.1 直接量字符

正则表达式中的所有字母和数字都是按照字面含义进行匹配的,Javascript正则表达式语法也支持非字母的字符匹配,这些字符需要通过反斜线\作为前缀进行转义。

字符 匹配
字母和数字字符 自身
\o Null字符
\t 制表符
\n 换行符
\v 垂直制表符
\f 换页符
\r 回车符

字符集合

一个字符集合,也叫字符组。匹配集合中的任意一个字符。你可以使用连字符‘-’指定一个范围

6.1.1 方括号用于查找某个范围内的字符:

[abc] 查找方括号之间的任何字符

var str = 'abc qwe abd'
var reg1 = /[abc]/;// 只要包含有a 或者 包含有b 或者包含有c 都返回为true
console.log(reg1.test(str)); //true

[0-9] 查找任何从0至9的数字

var str = 'abc qwe abd1'
var reg1 = /[0-9]/igm;
console.log(reg1.test(str)); //true

[^xyz] 一个反义或补充字符集,也叫反义字符组。也就是说,它匹配任意不在括号内的字符。你也可以通过使用连字符 ‘-’ 指定一个范围内的字符。

注意:^写在[]里面是反义字符组

var str = 'abc qwe abd1,2'
console.log(str);
var reg1 = /[^abc ]/igm;
console.log(reg1.exec(str)); //true

6.2 边界符

^ 匹配输入开始。表示匹配行首的文本(以谁开始)。如果多行(multiline)标志被设为 true,该字符也会匹配一个断行(line break)符后的开始处。

$ 匹配输入结尾。表示匹配行尾的文本(以谁结束)。如果多行(multiline)标志被设为 true,该字符也会匹配一个断行(line break)符的前的结尾处。

如果 ^和 $ 在一起,表示必须是精确匹配。

var rg = /abc/; 
// /abc/ 只要包含有abc这个字符串返回的都是true
console.log(rg.test('abc'));  //true
console.log(rg.test('abcd')); //true
console.log(rg.test('aabcd'));//true
console.log('---------------------------');
// 必须是以abc开头的字符串才会满足
var reg = /^abc/;
console.log(reg.test('abc')); // true
console.log(reg.test('abcd')); // true
console.log(reg.test('aabcd')); // false
console.log('---------------------------');
// 必须是以abc结尾的字符串才会满足
var reg = /abc$/;
console.log(reg.test('abc')); // true
console.log(reg.test('qweabc')); // true
console.log(reg.test('aabcd')); // false
console.log('---------------------------');
var reg1 = /^abc$/; // 精确匹配 要求必须是 abc字符串才符合规范
console.log(reg1.test('abc')); // true
console.log(reg1.test('abcd')); // false
console.log(reg1.test('aabcd')); // false
console.log(reg1.test('abcabc')); // false

6.2.1 字符集合与"^“和”$"一起使用

// 三选一 只有是a 或者是 b  或者是c 这三个字母才返回 true
var rg1 = /^[abc]$/; 
console.log(rg1.test('aa'));//false
console.log(rg1.test('a'));//true
console.log(rg1.test('b'));//true
console.log(rg1.test('c'));//true
console.log(rg1.test('abc'));//false
//26个英文字母任何一个字母返回 true  - 表示的是a 到z 的范围  
var reg = /^[a-z]$/ 
console.log(reg.test('a'));//true
console.log(reg.test('z'));//true
console.log(reg.test('A'));//false
//字符组合
// 26个英文字母(大写和小写都可以)任何一个字母返回 true
var reg1 = /^[a-zA-Z0-9]$/; 
//取反 方括号内部加上 ^ 表示取反,只要包含方括号内的字符,都返回 false 。
var reg2 = /^[^a-zA-Z0-9]$/;
console.log(reg2.test('a'));//false
console.log(reg2.test('B'));//false
console.log(reg2.test(8));//false
console.log(reg2.test('!'));//true

\b 匹配一个零宽单词边界(zero-width word boundary),表示一个单词(而非字符)边界,也就是单词和空格之间的位置,或者字符(\w)与字符串开头或者结尾之间的位置。


\B 匹配一个零宽非单词边界(zero-width non-word boundary),与"\b"相反。

var str = 'Hello World Hello JavaScript';
var reg1 = /\bHello\b/g;
var reg2 = /\BScrip\B/g;
console.log(reg1.exec(str));
console.log(reg2.exec(str));

6.3 字符类

将直接量字符单独放进方括号内就组成了字符类,一个字符类可以匹配它所包含的任意字符。例如:/[abc]/ 就和字母"a"、“b”、“c"中的任意一个都匹配。”"符号用来定义否定字符类,例如:/**[abc]**/ 匹配的是"a"、“b”、"c"之外的所有字符。字符类可以使用连字符来表示字符范围,例如:/[a-z]/,要匹配拉丁字母表中任何字母和数字,[a-zA-Z0-9]

字符类 含义
. 匹配除换行符\n和回车符之外的任何单个字符,等效于**[^\n\r]**
\d 匹配一个数字字符,等效于[0-9]
\D [^0-9]
\w 匹配包括下划线的任何单个字符,包括AZ,az,0~9和下划线**""**,等效于 [a-zA-Z0-9]
\W [^a-zA-Z0-9_]
\s 匹配任何Unicode空白字符,包括空格、制表符、换页符等,等效于[\f\t\n\r]
\S [^\f\t\n\r]

结合英文原意记忆:

d ==> digit(数字)
s ==> space(空白)
w ==> word(单词)

“.” 除换行符\n和回车符之外的任何单个字符

var str = '\nHello World Hello\r JavaScript';
console.log(str);
var reg1 = /./g;
console.log(reg1.exec(str));

\d 匹配一个数字字符,等效于[0-9]

// 以数字开头
var str = '123Hello World Hello 123JavaScript';
console.log(str);
var reg1 = /^\d/g;
console.log(reg1.exec(str));

\D 等效于**[^0-9]**

// 不以数字开头
var str = 'Hello World Hello 123JavaScript';
console.log(str);
var reg1 = /^\D/g;
console.log(reg1.exec(str));

\w匹配包括下划线的任何单个字符,包括AZ,az,0~9和下划线**""**,等效于[a-zA-Z0-9]

\W [^a-zA-Z0-9_]

var str = '!Hello World Hello JavaScript';
// \w -> [a-zA-Z0-9_]
var reg1 = /^\w/;
console.log(reg1.test(str));
// \W -> [^a-zA-Z0-9_]
var reg2 = /^\W/;
console.log(reg2.test(str));

\s 匹配任何Unicode空白字符,包括空格、制表符、换页符等,等效于[\f\t\n\r]

// 以空白字符开头
var str = '\nHello World Hello 123JavaScript';
console.log(str);
var reg1 = /^\s/g;
console.log(reg1.exec(str));

\S 等效于**[^\f\t\n\r]**

// 不以空白字符开头
var str = 'Hello World Hello 123JavaScript';
console.log(str);
var reg1 = /^\S/g;
console.log(reg1.exec(str));


目录
相关文章
|
2月前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
124 1
|
3月前
|
自然语言处理 JavaScript 前端开发
JavaScript 正则表达式
JavaScript 正则表达式
22 3
|
4月前
|
JavaScript 前端开发
js中通过正则表达式验证邮箱是否合法
这篇文章提供了一个JavaScript示例,通过正则表达式在网页上验证用户输入的邮箱地址是否合法,并给出了相应的提示信息。
js中通过正则表达式验证邮箱是否合法
|
6月前
|
机器学习/深度学习 JavaScript 前端开发
JavaScript中的正则表达式详细展示
JavaScript中的正则表达式详细展示
42 6
|
6月前
|
JavaScript 前端开发 测试技术
JavaScript进阶-正则表达式基础
【6月更文挑战第21天】正则表达式是处理字符串的利器,JavaScript中广泛用于搜索、替换和验证。本文讲解正则基础,如字符匹配、量词和边界匹配,同时也讨论了常见问题和易错点,如大小写忽略、贪婪匹配,提供代码示例和调试建议。通过学习,开发者能更好地理解和运用正则表达式解决文本操作问题。
50 1
|
5月前
|
JavaScript 数据安全/隐私保护
js 常用正则表达式【实用】
js 常用正则表达式【实用】
31 0
|
5月前
|
存储 JavaScript 前端开发
|
6月前
|
XML JavaScript 数据安全/隐私保护
一篇文章讲明白js常用js正则表达式大全
一篇文章讲明白js常用js正则表达式大全
37 0
|
7月前
|
前端开发 JavaScript
前端 js 经典:正则表达式
前端 js 经典:正则表达式
60 2
|
7月前
|
XML JavaScript 前端开发
【JavaScript | RegExp】正则表达式
【JavaScript | RegExp】正则表达式
79 4