day17-JavaScript正则表达式

Posted 东郭仔

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了day17-JavaScript正则表达式相关的知识,希望对你有一定的参考价值。

一、概要

  在python 的学习中我们又学到一个re模块,在javascript 中也是支持正则的,JS中比较简单只有两个方法:

  test  -检查字符串中是否和正则匹配 ,返回 true,false

  exec  - 获取正则表达式匹配的内容,如果未匹配,值为null,否则,获取匹配成功的数组

二、正则回顾 

 1 1.代码
 2 [...] 匹配方扣号中字符的任意一个字符,
 3         其中可以使用“—” 表示制定范围[0-9][a-z,A-Z]
 4         
 5     示例 :
 6     /[012] 可以与0A1B2C 中的字符,0,或者1,2匹配一次。
 7     下面会将量词{}
 8     
 9 [^...] 非,除了括号内的内容,其它可以匹配
10 
11         [^a-z] ,除了小写字母a-z不匹配,其它匹配
12         
13 .          匹配除了换行,回车之外的任意字符
14         [^
]
15         
16 d      匹配任意一个数字 相当于[0-9]
17 D        匹配除了数字之外,相当于[^0-9]
18 
19 s        匹配任意空白字符,如空格,制表符,换行符,
20         相当于[	
x0Bf
]
21         
22 S      相对s 匹配非空白字符
23 
24 w      匹配任意一个数字,字母,大小写
25         [a-zA-Z0-9_]
26         
27 2. 量词
28 
29 ?        匹配前面一项0次或者1次
30 
31         实例:/JS?/  作用于S
32                 /[JS]?/ 作用于JS
33 +         匹配前面项 1次或者多次,
34             单至少一次
35             
36 *        匹配前面一项0次,或者多次
37             任意次数
38             
39 {n}        匹配两次  /o{2}/  google ,匹配联系两个o  home 不匹配
40                 
41 {n,m}    匹配次数范围  n<=x<m                 
42                 
43                 
44 3,位置
45 
46 ^        字符的开头,注意去吧[^...]
47 
48         例子:
49         /^g/  匹配 good ,不匹配 bug
50         
51 $        匹配字符串的行结尾
52         /g$/  匹配 bug 不匹配good
53         
54         
55       匹配单词的边界
56         例子: /e/  匹配 I love seek ,匹配love 中的e
57         
58 B       与 相反,匹配中间
59 
60 
61 4,选择匹配符    | 或则
62         例子 /1|2/  匹配1,或者2
63         
64 5,分组 ()
65 
66     例子, JavaScript  , /J(ava)?Script
67     
68     可以匹配 JSctipt, JavaScript
69         
70         注意区分 [ava]  这个相当于 3个单元,只要其中有一个匹配就行
71         (ava) 是一个整理, (ava)? 匹配ava一次或者0次

 

三、JS中的正则

  1.通过RegExp类的构造方法创建
        d{3}
        语法格式:new RegExp(pattern,[flags])
        pattern:必选参数,用于指定正则表达式的标志信息。
            g:全局标志,如果设置了该标志,对于莫个文本执行搜索,或者替换时
                文本中所有的匹配将其作用,如果没有只生效一次。
            i:忽略大小写标志,
            m:多行标志,如果不设置这个标志,那么^只能匹配字符串的开头,$只能匹配字符串的结尾。
            
            var objExp=new RegExp("\d",g);
            
            
    2.通过正则表达式字面量创建RegExp 对象
    
        正则表达式字面量由两条//中间加入模式匹配字符串组成
        如果还要指定标志信息,则在最后面的/ 加上标志信息,比如G,i
        var objExp=/d/g;
        
        
    3.使用test()方法进行模式匹配
        test() aa方法用于对于一个指定字符创执行模式匹配,
        如果匹配成功,返回true, 否则返回false

  

检查电话
		/^(d{3,4}-)?d{8}$/

		/^(d{3}-)?d{8}$|^(d{4}-)?d{7,8}$

			<!DOCTYPE html>
				<html lang="en">
				<head>
					<meta charset="UTF-8">
					<title>Title</title>
				</head>
				<body>
				<form name="form1">
					<input type="text" name="tel" id="tel">
					<input type="button" value="检测" onclick="checkTel()">
				</form>
					<script>
						function checkTel() {
							var str=form1.tel.value;
							console.log(str);
							var objExp=/^((d{3,4}-)?d{7,8})$/;
							if(objExp.test(str)){
								alert("OK")
							}else{
								alert("NO")
							}
						}
					</script>
				</body>
				</html>

   4. 使用exec() 方法进行模式匹配
            
            exec() 方法返回值不是true, false,
            
            而是当没有搜索到匹配的字符时,返回null,
            否则返回一个数组,这个数组的第一个元素包含与正则表达式相匹配的字符串
            其它元素包含的是匹配的各个分组()

            regExp.exec(str)
            
            例子,身份证号码,提取出生年月

  

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <form name="form1">
 9         <div>pls input :生分证号码</div>
10         <input type="text" name="idcard" id="idcard">
11 
12         <input type="button" value="提取出生年月日" onclick="getBrithday()">
13     </form>
14 
15     <script>
16         function getBrithday() {
17             var str=form1.idcard.value;
18             console.log(str);
19             var objExp=/(d{6})(d{8})(d{4})/;
20             console.log(objExp.test(str));
21             var arr=objExp.exec(str);
22             if(arr!=null){
23                 alert("出生日期:"+arr[2]);
24             }else{
25                 alert("gun")
26             }
27         }
28     </script>
29 </body>
30 </html>

 

四、字符串中相关方法

1
2
3
4
5
6
7
8
obj.search(regexp)                   获取索引位置,搜索整个字符串,返回匹配成功的第一个位置(g模式无效)
obj.match(regexp)                    获取匹配内容,搜索整个字符串,获取找到第一个匹配内容,如果正则是g模式找到全部
obj.replace(regexp, replacement)     替换匹配替换,正则中有g则替换所有,否则只替换第一个匹配项,
                                        $数字:匹配的第n个组内容;
                                        $&:当前匹配的内容;
                                        $`:位于匹配子串左侧的文本;
                                        $‘:位于匹配子串右侧的文本
                                        $$:直接量$符号

五、自定义表单验证插件

5.1、表单验证的目的?

减少对数据库的请求,对于哪些简单的用户输入格式或者用户输入为空,但是密码和用户的操作,需要交给后台处理。但是如果浏览器的js被禁用了,那就只能发到后台,让后台去处理了。所以我们一般情况下是前端写一部分,后端全部写。

以上是关于day17-JavaScript正则表达式的主要内容,如果未能解决你的问题,请参考以下文章

text 正则表达式片段

markdown 正则表达式模式片段

day17JDK5.0新特性与正则表达式

Perl正则表达式(regex)在我设为可选时失败

正则表达式匹配特定的 URL 片段而不是所有其他 URL 可能性

如何使用 jQuery 将正则表达式应用于输入?