JavaScript中的正则表达式

发表于 | 分类于 ， ， | 阅读次数:

正则表达式

复习字符串操作
indexOf 查找
substring 获取子字符串
charAt 获取某个字符
split 分割字符串，获得数组
找出字符串中的所有数字
用传统字符串操作完成
用正则表达式完成

正则和正则的写法

让计算机能够读懂人类的规则
正则都是操作字符串的

1
2
var re = /a/;  // 建议使用此种简写写法，性能较下面一种好;尽量不要让正则表达式为空，否则这里//会被认为是注释，需要注意两个/之间的内容不是字符串
var re = new RegExp('a');  // 当正则需要传参的时候，必须用此种写法 var re = new RegExp(param);

正则表达式的常用方法

test

test
字符串判断
返回真假
正则.test(字符串)
例子：是否有不是数字的字符
正则去匹配字符串，如果匹配成功就返回真，如果匹配失败就返回假
test的写法：正则.test(字符串)

1
2
3
4
5
var str = 'abcdef';
var re = /b/;
var re2 = /w/;
alert(re.test(str));  // true
alert(re2.test(str));  // false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 转义字符 (本来字符有自身的意思，加上反斜杠后就变成了另外的意思)
// \n  换行
// \r  回车
// \t  制表
/*
\s: 空格
\S: 非空格
\d: 数字
\D: 非数字
\w: 字符 (字母、数字、下划线)
\W: 非字符
*/

var str = '234928t34820';
var re = /\D/;
if(re.test(str)){
  alert('不全是数字');
}else{
  alert('全是数字');
}
字符串搜索
    返回出现的位置
    字符串.search(正则)
    忽略大小写：i--ignore

正则去匹配字符串，如果匹配成功，就返回匹配成功的位置，如果匹配失败就返回-1
search的写法：字符串.search(正则)
正则默认是区分大小写的，加标识i不区分大小写

1
2
3
4
5
6
7
8
9
10
var str = 'abcdef';
var re = /b/;
var re1 = /w/;
var re2 = /B/;
var re3 = /B/i;
// var re3 = new RegExp('B', 'i');
str.search(re); // 1
str.search(re1); // -1
str.search(re2); // -1
str.search(re3); // 1

match

match
获取匹配的项目
返回数组
量词：+
全局匹配：g–global
例子：找出所有数字
正则去匹配字符串，如果匹配成功，就返回匹配成功的数组，如果匹配不成功，就返回null
match的写法：字符串.match(正则)
正则默认匹配成功就会结束，不会继续匹配，加标识g(全局匹配)全部查找

量词：匹配不确定的位置

  • : 至少出现一次
1
2
3
4
5
6
7
8
9
var str = '234s28t34820';
var re = /\d/;
var re1 = /\d/g;
var re2 = /\d\d/g;
var re3 = /\d+/g;
str.match(re);  // [1]
str.match(re1);  // [2,3,4,2,8,3,4,8,2,0]
str.match(re2);  // [23,28,34,82]
str.match(re3);  // [234,28,34820]
replace

replace
替换所有匹配
返回替换后的字符串
字符串.replace(正则，想替换的)
例子：敏感词过滤

匹配子项
例子：日期格式化

正则去匹配字符串，匹配成功的字符替换成新的字符串
replace的写法：字符串.replace(正则,新的字符串)
第二个参数可以是一个字符串，也可以是一个回调函数，函数的第一个参数就是匹配成功的字符

1
2
3
4
5
6
7
8
var str = 'aaa';
var re = /a/;
str.replace(re,'b');
alert(str); // 'baa';
str.replace(re,function(){
  return 'b';
  });
alert(str); // 'baa';

练习：敏感词过滤

匹配子项：小括号()（还有另外一个意思，分组操作）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var str = '2018-11-6';
var re = /(\d+)(-)/g;
str.replace(re, function($0,$1,$2){
  // 第一个参数：正则整体
  // 第二个参数：第一个小括号里的正则，即第一个子项
  // 第三个参数：第二个小括号里的正则，即第二个子项
  // alert($0);  // 2018- 11-
  // alert($1);  // 2018 11
  // alert($2);  // - -
  return $1 + '.';  // '2018.11.6'
  return $0.substring(0,$0.length-1) + '.';  // '2018.11.6'
  });

var str = 'abc';
var re = /(a)(b)(c)/;
alert(str.match(re)); // [abc,a,b,c] (当match不加g的时候才可以获取到子项的集合)

正则表达式字符类

字符类：一组相似的元素（字符） [] 中括号的整体代表一个字符

1
2
3
4
5
var str = 'abc';
var str1 = 'abdc';
var re = /a[bde]c/;
alert(re.test(str));  // true
alert(re.test(str1));  // false

排除：^ 如果^写在[]里面的话，就代表排除

1
2
3
var str = 'awc';
var re = /a[^bde]c/;
alert(re.test(str));  // true

范围：

1
2
3
var str = 'abc';
var re = /a[a-z0-9A-Z]c/;
alert(re.test(str));  // true

练习：过滤标签

转义字符

  • . (点) 任意字符 (. 真正的点需要转义)
  • \d \w \s \b
  • \D \W \S \B
  • \1 重复子项
  • 例子
    • 获取class元素
    • 找重复项最多的字符和个数
      \b: 独立的部分 （起始，结束，空格）
      \B: 非独立的部分
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      var str = 'onetwo';
      var re = /\bone/;
      var re1 = /one\b/;
      alert(re.test(str));  // true
      alert(re1.test(str)); // false

      // ...
      var str='thisis';
      console.log(/\bthis/.test(str))  //true

      var str='啊thisis';
      console.log(/\bthis/.test(str))   //true

      var str=' thisis';
      console.log(/\bthis/.test(str))   //true

      var str='.thisis';
      console.log(/\bthis/.test(str))   //true

      var str='-thisis';
      console.log(/\bthis/.test(str))   //true

      // 关键点来了：
      var str='wthisis';
      console.log(/\bthis/.test(str))   //false

      var str='3thisis';
      console.log(/\bthis/.test(str))   //false

      var str='_thisis';
      console.log(/\bthis/.test(str))   //false
      // 只有三面三种情况才会返回false，也就是t的前面不能是\w(字母、数字、下划线)，如果是就会匹配不成功。

练习：获取class元素

正则中的重复的子项

\1 : 重复的第一个子项
\2 : 重复的第二个子项

1
2
3
var str = 'abca';
var re = /(a)(b)(c)\1/;
alert(re.test(str));  // true

可以用于标签的匹配<div></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 找重复项最多的字符和个数
var str = 'dsjflajdjldf';
var arr = str.split('');
str = arr.sort().join('');

var value = '';
var index = 0;

var re = /(\w)\1+/g;
str.replace(re,function($0,$1){
  if(index < $0.length){
    index = $0.length;
    value = $1;
  }
});
alert('最多的字符：'+value+'，重复的次数：'+index);

正则中的量词和首尾匹配

量词 : {}
{4,7} : 最少出现4次，最多出现7次
{4,} : 最少出现4次
{4} : 出现4次

  • : {1,} 最少出现1次
    ? : {0,1} 出现0次或1次
  • : {0,} 最少出现0次

^ : 在正则的开始位置，代表起始
$ : 在正则的结尾位置，代表结束

例子：
-判断是不是QQ号
-去掉前后空格

常用正则例子
高级表单校验
匹配中文：[\u4e00-\u9fa5]
行首行尾空格：^\s|\s$
Email：^\w+@[a-z0-9]+(.[a-z]+){1,3}$
网址：[a-zA-Z]+://[^\s]*
QQ号：[1-9][0-9]{4,9}
邮政编码：[1-9]\d{5}
身份证：[1-9]\d{14}|[1-9]\d{17}|[1-9]\d{16}x

正则与面向对象
把方法包在一个空间里–命名空间(JSON对象，把同一类方法包在一起)

1
2
3
4
5
var re = {
  qq: /[1-9][0-9]{4,9}/,
  email: /^\w+@[a-z0-9]+(\.[a-z]+){1,3}$/
};
console.log(re.email);