JavaScript学习笔记(八)
正则表达式
正则表达式(Regular Expression)是一个描述字符模式的对象
目前正则表达式的主要作用:
(1)用来在客户端验证输入的数据(一个严谨项目需要由客户单验证和服务端验证)
(2)常用于做爬虫网页信息使用
一、正表达式对象的创建
前言:JavaScript语言中正则表达式的创建(实际上,不同的编程语言支持的正则表达式都是一样,不一样的地方可能在创建方面不同)
创建方式:
- 直接量的方式
- 创建RegExp对象的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//1.直接量方式
/* /表达式/属性:
* /pattern/attributes
*/
let r1 = /aaaa/g;
console.log(r1);
//2.创建RegExp对象
/*
* new RegExp("表达式","属性")
*/
let r2 = new RegExp("bbbb","g");
console.log(r2);
</script>
</body>
</html>
attributes
的取值:
g
:全局匹配i
:忽略大小写m
:多行匹配
二、字符串对象支持正则表达式的方法
(1)search
:
字符串中指定的子字符串或者检索的正则表达式相匹配的字符串,存在返回第一次出现的索引,没有返回-1(不支持全局匹配)
<script>
let str = "love you LOVE YOU";
console.log(str.search(/LOVE/));//9
console.log("忽略大小写"+str.search(/LOVE/i));//0
console.log(str.search("love"));//0
console.log("没有匹配的返回-1"+str.search(/me/));//-1
</script>
(2)match
:
字符串中指定子字符串或者检索的正则表达式相匹配的数据,如果匹配成功,返回值是一个数组,它可以设置全局匹配(数组中包含三个元素,第一个元素的存放的匹配文本,第二个index属性的位置、input属性声明的是对象引用).如果没有,返回null
<script>
let str = "love you LOVE YOU";
console.log(str.match(/LOVE/));
console.log(str.match(/LOVE/i));
console.log(str.match(/LOVE/ig));
console.log(str.match(/me/));
let s = "1 plus 24 equals 3";
console.log(s.match(/[0-9]/));//未全局匹配,只出现1
console.log(s.match(/[0-9]/g));//出现四个
console.log(s.match(/[0-9]+/g));//+:连续匹配,出现三个
</script>
(3)replace
:
替换方法,返回值新的字符串
let str = "love you LOVE YOU";
let s1 = str.replace("you","me");
console.log(s1);
let s2 = str.replace(/you/ig,"me");
console.log(s2);
let name = "hello I am a chinese people";
let regexp = /am/g;
if(regexp.test(name)){
/*了解一下就可以!RegExp对象:一些静态属性*/
console.log(RegExp['$&']);//最后一个匹配的字符串
console.log(RegExp["$'"]);//最后一个匹配的字符串后的字符串
console.log(RegExp["$`"]);//最后一个匹配的字符串前的字符串
console.log(RegExp["$+"]);
console.log(RegExp["$_"]);
}
(4)split
:
分割字符串,返回的数组
let str = "what are you doing?";
console.log(str.split(" "));
console.log(str.split(""));
str = "what are \t you \n doing?";
console.log(str);
console.log(str.split(/\s+/g));//\s代表一些空格操作,+代表出现一次以上
三、RegExp对象方法
(1)test
:
常常使用,用于检测一个字符串是否匹配某一个模式(正则表达式)
let str = "very love me";
console.log(/love/.test(str))
console.log(/^love/.test(str))//"^"代表从第一位开始匹配:必须以"love"开头=====>true
console.log(/me$/.test(str))//"$":必须以"me"结尾=====>true
console.log(/love$/.test(str))//=====>false
console.log(/^love$/.test(str))//以"love"开头结尾=====>false
(2)exec
:
检测字符串中正则表达式匹配,返回的是数组
\d
代表[0-9]
let s = "plus 24 equals 3";
console.log(/\d+/.exec(s));
四、正则表达式说明
(1)普通字符:
字母、数字、下划线、汉字以及一些没有特殊定义的标点符号,都属于普通字符
(2)()
、[]
和|
的含义
/*(blue|red|yellow):查找小括号中的任意的一项,|代表或者的意思*/
/*[bcd][bcd]:代表两位只有组合,只要匹配即可 bb,bc,bd,cb,cc,cd,db,dc,dd*/
let str = "abcdefabcdef";
console.log(str.match(/(ab|ef)/g));
console.log(str.match(/([abef][efba])/g));
(3)正则表达式中元字符
.
:匹配除换行符以外的任意字符[A-Za-z0-9]
:匹配括号中的字符集中的任意字符
[^A-Za-z0-9]
:匹配不在括号中的字符集中的任意字符
\d
:匹配数字[0-9]
\D
:匹配非数字[^0-9]
\w
:匹配字母、数字、下划线[A-Za-z0-9_]
\W
:匹配非字母、数字、下划线[^A-Za-z0-9_]
\s
:匹配空白字符、空格、制表符和换行符\S
:匹配非空白字符
\O
:匹配null字符\b
:匹配空格字符\f
:匹配制表字符\n
:匹配换行字符\r
:匹配回车字符
(4)^
行首匹配和$
行尾匹配,如果遇到特殊字符需要使用\
转义
五. 匹配模式(贪婪模式和非贪婪模式)
-
被量词修饰的子表达式的匹配行为
-
贪婪模式在整个表达式匹配成功的情况下尽量多的匹配
-
非贪婪模式在整个表达式匹配成的前提下尽量少的匹配
(1)贪婪模式的量词 -
+
:重复1~N次 -
?
:重复0~1次 -
*
:重复0~N次 -
{n}
:必须重复N次 -
{n,}
:至少重复N~无穷 -
{n,m}
:重复n~m次
let str = "love you<p>星河</p>孤帆远影<p>天空</p>very";
//贪婪模式
console.log(str.match(/<p>.*<\/p>/));
//非贪婪匹配
console.log(str.match(/<p>.*?<\/p>/));
六. 案例
1.手机号验证
console.log("1.验证手机号码");
let reg = /^1[3456789]\d{9}$/;
console.log(reg.test("155968476324"))//超出位数
console.log(reg.test("12596847634"))//不支持开头12的号码
console.log(reg.test("15946123456"))//true
2.邮箱验证
console.log("2.验证邮箱");
reg = /^[a-zA-Z0-9_-]+@+\w+(\.\w+)+$/;//连接处必须要有"+"
console.log(reg.test("123.53456.123"));
console.log(reg.test("klda_dsf@163.com"));
console.log(reg.test("klda_dsf@163.com.cn"));
3.账号规则
console.log("3.账号规则");
reg = /^[a-zA-Z]\w{4,15}$/;
console.log(reg.test("123sad"));//不支持数字开头
console.log(reg.test("sad"));//账号少于5位
console.log(reg.test("sakjfdksafj"));//true
4.简单身份证验证
console.log("4.简单的身份证验证");
reg = /^\d{17}(\d|[Xx])$/;
5.日期验证
console.log("5.日期验证");
reg = /^\d{4}[-.\/]\d{1,2}[-.\/]\d{1,2}$/;
6.简单爬网址
console.log("6.简单爬网址")
let content = "<div><a href=\"http://www.baidu.com\">百度一下</a></div><div><a href=\"http://www.biying.com\">必应搜索</a></div> <div><a href=\"http://www.4399.com\">4399小游戏</a></div><p>给我死来</p>";
reg = /<a\s+href=["']http:\/\/.*?["']>.+?<\/a>/gi;
console.log(content.match(reg));