热搜：编程 Python Microsoft 编程语言 C++

首页> 前端开发 > JavaScript > 正文

JavaScript系列

发布时间：2024-08-22 09:38:41 来源：网络

.

1 正则表达式1 1 正则表达式的类型正则表达式在JavaScript中，提供了一种内置的构造函数--RegExp 正则表达式有三种匹配模式：g: 表示全局

1.正则表达式

1.1.正则表达式的类型

正则表达式在JavaScript中，提供了一种内置的构造函数--RegExp.

正则表达式有三种匹配模式：
- g: 表示全局模式，即模式应用于所有的字符串，而非发现第一个符合条件的字符串停止。
- i: 表示字符串匹配的时候忽略（ingnore）字符串的大小写。
- m: 表示多行（multiline）模式，即在达到一行的末尾时，确定是否要接着匹配下一行。
1.2.正则表达式创建

正则表达式的两种创建方式：
- 面向字面量
  字面量方式创建字符串比较简单，如下所示
```
var reg=/bt/gim;  ----注释： /bt/ 两个斜杠中表示的是匹配项。而 gim表示匹配模式，g i m 三种匹配模式可以写一种或几种，也可以不写。
```
- 构造函数
  构造函数如下所示
```
var reg=new RegExp("bt","gim");//---注释 第一个参数是字符串匹配项，第二种表示匹配模式。
```
  两种方式在初始化正则表达式的时候所得的结果，几乎相同。除了一点----- 第二种在出现元字符的时候需要转义.
1.3.元字符
正则表达式的元字符均需要转义：

( [ { \ ^ $ | ) ? * + .] } 这14中字符在表示的时候均与要转义，因为他们在正则表达式中均有其自己的含义。

　关于正则表达式的匹配项的意义，这里只列举比较少见的几种。详情参见----正则表达式语法　　
- x|y ------表示匹配X或者Y。例如，'z|food' 匹配“z”或“food”。'(z|f)ood' 匹配“zood”或“food”。
- (?:x|y)---表示匹配X或者Y，但是过滤掉子选择项。这两种列举出来主要是是区分和上一种的区别。
  　　
```
/* 第一种演示(X|Y)*/
var str = 'iam007'; 
var reg = /^([a-z]|\d)/;         //匹配以数字或者是字母开头的字符串
var result = reg.exec(str);
console.log(result[1]);         //---结果：i


/*第二种 演示（?:X|Y）*/
```
  var str = 'iam007';
  var reg = /^(?:[a-z]|\d)/;
  var result = reg.exec(str);
  console.log(result[1]); //undefined
- (?=pattern)-----表示匹配从pattern开始向后搜索，并且根据pattern不占位置，并且下次匹配是从该位置开始的。
```
var str = 'iam007';
var reg = /(?=[a-z])(\w)/g;
var result = reg.exec(str);
while (result && result.length) {
  console.log(result[1]);
  result = reg.exec(str);
} //第一次匹配从i开始，第二次匹配从a开始，第三个匹配从m开始，第四次则无匹配项，输出结果 ：----i  a  m;
```
- (?!pattern)-----!pattern表示第一个与pattern不匹配的项，该匹配也是非捕获类型的。而且，下次匹配是从这个pattern位置开始的。
```
var str = 'iam007';
var reg = /(\w)(?![a-z])\d/g;
var result = reg.exec(str);
while (result && result.length) {
  console.log(result[1]);
  result = reg.exec(str);
} // 输出结果 ----  m  0   第一次匹配(m00),第二次匹配(007).第三次无匹配项。
```

2.RegExp的属性

2.1.RegExp的属性

RegExp的每个实例都有下列属性，通过这些属性可以得到正则表达式的各种信息。
- global: 布尔值，表示是否设置了g标志。----只读属性
- ignoreCase：布尔值，表示是否设置了i标志。----只读属性
- lastIndex:整数，表示开始搜索下一个匹配项的字符位置，从0开始。 ----可以读和写（但有局限性）
- multiline:布尔值，表示是否设置了m标志。-----只读属性
- source:正则表达式的字符串表示。 -----只读属性
这些属性，虽然包含在模式生命中，但是没有很大的作用，除了lastIndex外(只在global=true时更改才有效，当 global=false时，即使更改，也是从index=0位置处开始搜索)，其余的都不可更改，下面我们举个例子来说明lastIndex的用处。
```
var reg = /\w/g;
var str = 'abcdefg';
var result = reg.exec(str);
while (result && result.length) {
  console.log(result[0]);
  reg.lastIndex=reg.lastIndex+1;
  result = reg.exec(str);
}//跳跃查询，实用处也不大。
```

2.2.RegExp构造函数属性

RegExp构造函数有一些属性，请同RegExp实例的属性进行比较，讲着两部分主要是为了引出下一小节的内容。

长属性名	短属性名	说明
input	$_	最近一次要匹配的字符串
lastMatch	$&	最近一次匹配项（opera未实现此属性）
leftContext	$`	input字符串被匹配项之前的文本
multiline	$*	是否所有表达式都使用多行模式。IE和Opera尚未实现
rightContext	$'	input字符串被匹配项之后的文本
lastParen	$+	最近一次的捕获组.Opera未实现

　　　补充属性： $+数字，表示被小括号捕获的项。

这些值,可以从exec()和test()中提取出具体信息。----注：此正则表达式实例必须是字面量形式创建，才可以访问。

var text = 'hello world';
var reg = /\s/g;  //匹配中间的空格
var result = reg.exec(text);
for (var property in RegExp) {
  console.log('RegExp[' + property + ']=' + RegExp[property]);
}
//输出结果

RegExp[input]=hello world

RegExp[multiline]=false

RegExp[lastMatch]=

RegExp[lastParen]=

RegExp[leftContext]=hello

RegExp[rightContext]=world

RegExp[$1]=

RegExp[$2]=

RegExp[$3]=

RegExp[$4]=

RegExp[$5]=

RegExp[$6]=

RegExp[$7]=

RegExp[$8]=

RegExp[$9]=

2.3.正则表达式的使用

先来看一段代码比较：
```
var text = 'hello2world';
var reg = /\d/g;
var result = reg.exec(text);
console.log(RegExp.lastMatch);
reg=new RegExp("\\w","g");
```
```
result = reg.exec(text);
console.log(RegExp.lastMatch);//输出结果 2 h
```
由以上的输出结果，我们知道，所有的正则表达式实例在使用的时候都会改变RegExp构造函数的属性，所以在每一次正则表达式使用的时候我们都可以通过RegExp构造函数的属性，来取得我们想要的结果。

3.正则表达式exec(),test()以及match()方法及其区别。

3.1.非全局模式---global=false;

exec()函数：

exec() 方法用于检索字符串中的正则表达式的匹配,返回值是数组
语法：
```
RegExpObject.exec(string)
```
参数描述返回值

string 被检索的字符串字符串数组

　

在非全局模式下，每次检索字符串的时候都是从最开始的位置检索，返回的数组，第一项是完全匹配的项，第二项是捕获项！等于RegExp.$1,同时也改变RegExp构造函数的属性。
```
var text = 'hello2world2sad';
var reg = /\w*(\d)\w/;
var result = reg.exec(text);

console.log(result[0]);//hello2world2s   贪婪匹配
console.log(result[1]);//2

result = reg.exec(text);



console.log(result[0]);  //

hello2world2s
console.log(result[1]);//2

console.log(RegExp.$1) //2
```
test()函数：

test() 方法用于检查字符串中是否与正则表达式匹配,返回值是布尔值。

语法：
```
RegExpObject.test(string)
```
参数描述返回值

string 被检索的字符串布尔值

在非全局模式下，每次检索字符串的时候都是从最开始的位置检索，返回 true|false,同时也改变RegExp构造函数的属性。
```
var text = 'hello2world';
var reg = /\w*(\d)\w/;
var result = reg.test(text);
console.log(result);  //true
result = reg.test(text);
console.log(result);  //true
console.log(RegExp.$1) //2
```

match()函数

match() 方法用于检查字符串中是否与正则表达式匹配,返回值是数组。

stringObject.match(searchvalue)
stringObject.match(regexp)

语法：

参数	描述	返回值
seachValue	字符串	数组

参数	描述	返回值
regexp	正则表达式	数组

在非全局模式下，每次检索字符串的时候都是从最开始的位置检索，返回的是一次检索结果后的数组，同时也改变RegExp构造函数的属性。

var text = 'hello2world2sad';
var reg = /\w*(\d)\w/;
var result = text.match(reg);
console.log(result[0]); //hello2world2s
console.log(result[1]); //2
result = text.match(reg);
console.log(result[0]); // hello2world2s
console.log(result[1]); //2

3.1总结：

在非全局模式下：

　　test()方法：返回的总是布尔值，每次均从字符串首位开始检索字符串。

　　exec()方法：返回值是数组，数组中保存的总是第一次的匹配结果，每次检索均是从字符串首位开始检索。

　　match()方法：返回值是数组，数组中保存的一次的匹配结果，每次检索均是从字符串首位开始检索，返回结果和exec()的结果总是一致的。

　　　　　　　在非全局模式下，exec()和match（）唯一的区别就是调用者和函数参数位置互换而已。

3.2.全局模式下---global=true
- exec()函数：
  
  在全局模式下，每次检索字符串的时候都是从字符串上一次检索的结束位置开始检索，每次返回的数组，第一项是完全匹配的项，第二项是捕获项！等于RegExp.$1,同时也改变RegExp构造函数的属性。
  
  代码如下：
```
var text = 'hello1hello2hello3hello4hello5hello';
var reg = /[a-z]*(\d)/g;
var result = reg.exec(text);
console.log(result);   //["hello1", "1"]

result = reg.exec(text);
console.log(result);    //["hello2", "2"]
```
  所以，可以利用这种特性用正则表达式，遍历检索字符串。
- test()函数：
  
  　　在非全局模式下，每次检索字符串的时候都是从上一次检索后的位置开始检索，返回 true|false,每次检索都会改变RegExp构造函数的属性。
```
var text = 'hello1hello2hello3hello4hello5hello';
var reg = /[a-z]*(\d)/g;
var result = reg.test(text);
while (result) {
  console.log(RegExp.$1); //1 2 3 4 5
  result = reg.test(text);
}
```
- match()函数　
  
  　match函数在全局模式下，和非全局模式下有很大的区别。其在全局模式下，一次检索后，返回的虽然是个数组。但是数组中保存的所有匹配正则表达式的项。如下所示：
```
var text = 'hello1hello2hello3hello4hello5hello';
var reg = /[a-z]*(\d)/g;
var result = text.match(reg);
console.log(result); //["hello1", "hello2", "hello3", "hello4", "hello5"]
```
3.2总结：

在全局模式下：

　　test()方法：返回的总是布尔值，每次均是从上一次检索后的位置开始检索字符串。

　　exec()方法：返回值是数组，数组中保存的是每一次的匹配结果，每次均是从上一次检索后的位置开始检索字符串。

　　match()方法：返回值是数组，数组中保存的是所有的匹配结果，一次检索后，字符串会被检测完。下次在检索的时候，总是从字符串开头开始检索，两次返回的结果总是相同的。

在全局模式下，exec()和test()每次检索都是从上一次检索后的位置开始向后检索。而match()总是将所有匹配的结果保存在数组中。

4.字符串常用的正则表达式函数

4.1. split()函数

　　　split()函数的参数可以是字符串也可以是正则表达式。返回的结果总是数组

var text = 'hello1hello2hello3hello4hello5hello';
var reg = /\d/g;
var result = text.split(reg);

console.log(result); //hello ,hello ,hello, hello, hello

4.2. repalce()函数

　　replace()函数的参数可以是字符串也可以是正则表达式,当其为正则表达式的时候，使用如下　　　

var reg = /(^\s*|\s*$)/g //去掉字符串的开头和结尾空格
var hello = '    dasdasd     ';
console.log(hello.replace(reg, '').length);

var reg = /(\w)/g //将字符串中小写换成大写
var hello = 'dasdasd';
console.log(hello.replace(reg, function () {
  return RegExp.$1.toUpperCase()
}));  //DASDASD

以下您可能有感兴趣的文章:

标签： 首位遍历

JavaScript最新文章

javascript中表单验证常用到的正则表达式

Js与正则表达式

javascript中的正则表达式小结1

（10）javascript 引用类型正则表达式

javascript正则表达式复习

第五篇、javascript正则表达式二

Javascript与正则表达式个人总结与收录

JavaScript基础(12_正则表达式)

JavaScript 正则表达式的应用实例

JavaScript: 详解正则表达式之一

JavaScript热点排行

在线教程
开发软件

查看更多软件 

参数	描述	返回值
string	被检索的字符串	字符串数组

参数	描述	返回值
string	被检索的字符串	布尔值

JavaScript系列

1.正则表达式

1.1.正则表达式的类型

1.2.正则表达式创建

1.3.元字符

2.RegExp的属性

2.1.RegExp的属性

2.2.RegExp构造函数属性

2.3.正则表达式的使用

3.正则表达式exec(),test()以及match()方法及其区别。

3.1.非全局模式---global=false;

exec()函数：

test()函数：

match()函数

3.2.全局模式下---global=true

exec()函数：

test()函数：

match()函数

4.字符串常用的正则表达式函数

4.1. split()函数

4.2. repalce()函数

为您推荐

js实现图片推拉门效果代码实例

微信小程序 Animation实现图片旋转动画示例

详解JavaScript中的正则表达式

基于JS实现bookstore静态页面的实例代码

jQuery实现动画、消失、显现、渐出、渐入效果示例

JavaScript最新文章

match()函数　