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 [^\r\n] 15 16 \d 匹配任意一个数字 相当于[0-9] 17 \D 匹配除了数字之外，相当于[^0-9] 18 19 \s 匹配任意空白字符，如空格，制表符，换行符， 20 相当于[\t\n\x0B\f\r] 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 \b 匹配单词的边界 56 例子： /e\b/ 匹配 I love seek ，匹配love 中的e 57 58 \B 与\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被禁用了，那就只能发到后台，让后台去处理了。所以我们一般情况下是前端写一部分，后端全部写。
