js正则表达式

正则表达式是js中经常会被用到的知识，对于初学者来说可能会有一些晦涩难懂；今天就和大家来聊一聊这个关于“元字符”和“修饰符”的规则，说一说有关正则的知识和应用。

正则表达式的概念

正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。正则表达式是一种文本模式，该模式描述在搜索文本时要匹配的一个或多个字符串。

正则表达式的创建

1、通过new创建正则 //var box = new RegExp(“hello”, “ig”);
2、省略new创建正则 // var box = RegExp(“hello”, “ig”);
3、正则常量赋值 // /hello/gi

可以传入两个参数：

（1）正则主体部分，一般情况下就是字符串；
（2）修饰符(没有先后顺序)
i 忽略大小写
g 全局匹配
m 换行匹配

关于正则的方法

js正则表达式只有两种方法：test和exec

1、test方法

格式：正则.test(字符串);
功能：在字符串中匹配正则是否存在
返回值：如果存在返回true
如果不存在就返回false

2、 exec(了解)

格式：正则.exec(字符串)
功能：在字符串中匹配正则是否存在
返回值：如果存在返回一个数组，数组里面存放着匹配的内容；如果不存在，返回null

正则中可用的字符串方法

正则本身没有什么方法，但它却可以用一些字符串中的方法：

1、match

格式：字符串.match(正则)
功能：在字符串中匹配这个正则是否存在
返回值：如果存在，返回一个数组，数组放着，匹配到的子串；如果不存在，返回null

2、search

格式：字符串.search(正则)
功能：在字符串中，查找正则表达式，第一次出现的位置
返回值：如果查找到，返回，查找到的下标； 查找不到，返回-1

3、replace

格式：字符串.replace(正则, newStr);
功能：在字符串中找到正则，并且将他替换成新字符串。
返回值：替换成功的新字符串

4、split

格式：字符串.split(正则)
功能：使用正则对字符串进行字符串分割
返回值：分割完的子串组成的数组。

说到这里大家应该对正则有了一个大概的了解了，那我们接下来就来看看正则中的一个重要部分——元字符

元字符

【概念】在正则表达式中有特殊含义的字符。
js正则表达式中的元字符可大概分为5类

1、单个字符

. 匹配单个任意字符
[范围] 匹配单个范围内的字符
[0-9] 匹配单个的数字字符
[a-zA-Z0-9_] 匹配单个数字、字母或者下划线字符
[^范围] 匹配单个除范围内的字符
\d 等价于 [0-9] 匹配单个的数字字符
\D 等价于 [^0-9] 匹配单个的非数字字符
\w 等价于[a-zA-Z0-9_] 匹配单个数字、字母或者下划线字符
\W 等价于[^a-zA-Z0-9_] 匹配非单个数字、字母或者下划线字符

2、空白字符

\s 匹配任意的空白字符 空格、回车、换行(\n)、tab键
\S 匹配任意的非空白字符

3、锚字符（必须用在正则表达式的开头和结尾）

^ 行首匹配
$ 行尾匹配

4、重复字符（x代表任意的单个字符或者任意的单个元字符）

x+ 至少匹配一个x字符
x? 匹配0个或者1个x字符
x* 匹配任意个x字符
x{m,n} 匹配至少m个，至多n个x字符
x{n} 匹配n个x字符
(xyz) 凡是通过小括号括起来的多个字符，当做一个字符进行处理

5、替代字符

x | y | z 匹配x或y或者z中的任意一个

以上就是关于正则表达式的知识啦！接下来我们就通过实际运用来深入理解以下它吧！

通过正则表达式我们能较为轻松的做到表单验证

//表单验证  失去焦点事件
oUsername.onblur = function(){
 //获取输入框的内容
     var oValue = oUsername.value;
     //1、判断用户名的长度6~18长度
     if(oValue.length < 6 || oValue.length > 18){
            oUsernameSpan.style.color = 'red';
            oUsernameSpan.innerHTML = "！长度应为6~18个字符";

     //2、判断首字符是否是字母
      }else if(/[^a-zA-Z]/.test(oValue[0])){
            oUsernameSpan.style.color = 'red';
            oUsernameSpan.innerHTML = "！邮件地址必需以英文字母开头";

       //3、判断所有的字符都是数字、字母和下划线组成  
       }else if(/\W/.test(oValue)){
             oUsernameSpan.style.color = 'red';
              oUsernameSpan.innerHTML = "！邮件地址需由字母、数字或下划线组成";
       }else{
              oUsernameSpan.style.color = 'green';
              oUsernameSpan.innerHTML = '✅恭喜，该邮件地址可注册';
         }
}

以上，就是今天给大家带来的有关js正则表达式的一些知识和运用啦!其实正则表达式本身并没有什么难点，只不过由于语义化程度不高导致比较晦涩，其实只要多敲几遍代码就可以搞定了！没有什么是敲代码解决不了的，如果有就再多敲两遍就好啦！

如果你对前端开发的学习有兴趣，可以在B站上，找码农雨飞的免费前端学习视频，代码免费送。
https://www.bilibili.com/video/av77505416

——by 木木-逆战班