码迷,mamicode.com
首页 > Web开发 > 详细

js正则表达式

时间:2020-02-23 20:28:51      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:ado   判断   jpg   常量   color   type   大小   ffffff   语义   

正则表达式是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

格式:字符串.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正则表达式的一些知识和运用啦!其实正则表达式本身并没有什么难点,只不过由于语义化程度不高导致比较晦涩,其实只要多敲几遍代码就可以搞定了!没有什么是敲代码解决不了的,如果有就再多敲两遍就好啦!技术图片
——by 木木-逆战班

js正则表达式

标签:ado   判断   jpg   常量   color   type   大小   ffffff   语义   

原文地址:https://www.cnblogs.com/qazxswedc/p/12353299.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!