正则表达式
什么是正则表达式
正则表达式描述了字符串的构成模式，经常用于检查字符串是否符合预定的格式要求。
正则表达式写法：书写两个反斜杠包裹，^表示以什么开头，$表示以什么结尾。\d表示一位数字。
正则表达式调用test()检查字符串是否符合正则表达式规定的规则。
<script>
var regexp = /^\d{6}$/;
var str1 = '123456';
var str2 = '123abc';
var str3 = '1234567';
console.log(regexp.test(str1)); //true
console.log(regexp.test(str2)); //false
console.log(regexp.test(str3)); //false
</script>
正则表达式的创建
使用’/内容/'的语法能够快速创建表达式，也可以使用 new regexp(内容)创建表达式。
使用typeof检查正则表达式类型是object。
<script>
//创建正则表达式
var regexp1 = /^\d{6}$/;
var regexp2 = new RegExp('^\\d{6}$'); //需要转义多加一个斜杆 因为在里面是字符串形式。
var str = '123456';
console.log(regexp1.test(str)); //true
console.log(regexp2.test(str)); //true
console.log(typeof regexp1); //object
console.log(typeof regexp2); //object
</script>
元字符
元字符是指一位指定类型的字符
\d表示匹配一个数字
\D表示匹配一个非数字字符(不是数字)
\w表示匹配一个单字字符(字母、数字、下划线)
\W表示匹配一个非单字字符(不是字母数字下划线)
\s表示匹配一个空白字符、包括空格、制表符、换行符
.表示任意字符
^表示匹配开头
$表示匹配结尾
<script>
// 题目1：某快递公司运单号形式是这样的：123-4567-890，请使用正则表达式检查某字符串是否符合此格式
// 正则表达式
var regexp1 = /^\d\d\d-\d\d\d\d-\d\d\d$/;
// 待测试的字符串
var str1 = '444-5555-000';
console.log(regexp1.test(str1));
// 题目2：某产品的验证秘钥形式是这样的：□□□-□□□□-□□□，其中□表示字母数字或者下划线，请使用正则表达式检查某字符串是否符合此格式
// 正则表达式
var regexp2 = /^\w\w\w-\w\w\w\w-\w\w\w$/;
// 待测试的字符串
var str2 = 'abc-__ab-123';
console.log(regexp2.test(str2));
// 题目3：某产品批号形式为：123.45^67#89，请使用正则表达式检查某字符串是否符合此格式
var regexp3 = /^\d\d\d\.\d\d\^\d\d\#\d\d$/;
// 待测试的字符串
var str3 = '666.66^66#66';
console.log(regexp3.test(str3));
</script>
方括号表示法
使用方括号，创建一个字符集合[xyz]，表示匹配这个字符集合中的任意字符。
var regexp1=/^[by]\d{7}$/ //表示匹配b开头或者y开头后面带七位数字的字符。
<script>
// 题目1：请验证某字符串是否是5位字母，大小写均可
var str2 = 'abcde';
var str3 = 'abcd5';
console.log(/^[a-zA-Z]{5}$/.test(str2));
console.log(/^[a-zA-Z]{5}$/.test(str3));
// 题目2：请验证某字符串是否是5位，且仅由小写字母、点构成
var str4 = 'mnp..';
var str5 = 'mnp.#';
console.log(/^[a-z\.]{5}$/.test(str4));
console.log(/^[a-z\.]{5}$/.test(str5));
// 题目3：请验证某字符串是否是4位小写字母，且最后一位不能是m字母
var str6 = 'abcd';
var str7 = 'abcm';
var str8 = 'ab1c';
console.log(/^[a-z]{3}[a-ln-z]$/.test(str6));
console.log(/^[a-z]{3}[a-ln-z]$/.test(str7));
console.log(/^[a-z]{3}[a-ln-z]$/.test(str8));
</script>
量词
<script>
// 题目1：请验证字符串是否符合手机号码的规则：11位数字，并且肯定以1开头
var str1 = '13812345678';
var str2 = '138123456789';
var str3 = '38123456789';
var regexp1 = /^1\d{10}$/;
console.log(regexp1.test(str1));
console.log(regexp1.test(str2));
console.log(regexp1.test(str3));
// 题目2：请验证某字符串是否是这样的：以字母开头，中间是任意位数字（最少1位）构成，并以字母结尾
var str4 = 'a123123123b';
var str5 = 'abcd';
var str6 = 'a1b';
var regexp2 = /^[a-zA-Z]\d+[a-zA-Z]$/;
console.log(regexp2.test(str4));
console.log(regexp2.test(str5));
console.log(regexp2.test(str6));
// 题目3：请验证某字符串是否符合网址规则：以www.开头，中间是任意位的字符（字母数字下划线，最少一位），最后以.com结尾，也可以以.com.cn结尾
var str7 = 'www.imooc.com';
var str8 = 'www.sina.com.cn';
var str9 = 'www.news.cn';
var regexp3 = /^www\.\w+\.com(\.cn)?$/
</script>
修饰符
修饰符也叫标志，用于正则表达式的高级搜索。
正则表达式的相关方法
正则表达式打点调用方法：test()、exec()
test()测试字符串是否匹配正则表达式返回布尔类型
exec()根据正则表达式，在字符串中查找返回数组或者null。如果正则表达式中有g标识，那么使用exec()方法会逐条遍历。而且每一次遍历是接上一次的遍历继续的。
匹配字符串’JavaScript_RegExp_5@gmail.com’中的‘_RegExp_5@gm’，并用exec和test方法验证匹配结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式</title>
</head>
<body>
<script type="text/javascript">
var str = 'JavaScript_RegExp_5@gmail.com';
/*此处写代码*/
var regexp1=/\_[R]\eg[E]\xp\_[5]\@gm/;
var regexp2=/\_[R]\eg[E]\xp\_[5]\@gm/;
var regexp3=new RegExp('\_\RegExp\_5\@gm');
var regexp4=new RegExp('\_\RegExp\_5\@gm','i');
document.write(regexp1.test(str)+'/');
document.write(regexp2.test(str)+'/');
document.write(regexp3.test(str)+'/');
document.write(regexp4.test(str)+'/');
document.write(regexp1.exec(str)+'/');
document.write(regexp2.exec(str)+'/');
document.write(regexp3.exec(str)+'/');
document.write(regexp4.exec(str)+'/');
</script>
</body>
</html>
字符串的相关正则方法
<script>
var str = 'abc123def4567ghi89';
// search()方法，很像indexOf()，返回查找到的第一个下标，如果找不到就是-1
var result1 = str.search(/\d+/g);
var result2 = str.search(/m/g);
console.log(result1); // 3
console.log(result2); // -1
// match()方法，返回查找到的数组，找不到就是null
var result3 = str.match(/\d+/g);
console.log(result3); // ["123", "4567", "89"]
// replace()方法，进行替换
var result4 = str.replace(/[a-z]+/g, '*'); // 注意+表示贪婪的，尽可能多的连续匹配小写字母
console.log(result4); // *123*4567*89
// split()方法，进行字符串拆为数组
var result5 = str.split(/\d+/g);
console.log(result5); // ["abc", "def", "ghi", ""]
</script>
正则表达式的应用
正则表达式表单验证:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.warning {
color: red;
display: none;
}
</style>
</head>
<body>
<div>
<p>
请输入中文姓名:
<input type="text" id="nameFiled">
<span class="warning" id="nameWarning">输入的姓名不合法</span>
</p>
<p>
请输入手机号码:
<input type="text" id="telField">
<span class="warning" id="telWarning">输入的手机号码不合法</span>
</p>
<p>
请输入email:
<input type="text" id="emailField">
<span class="warning" id="emailWarning">输入的email不合法</span>
</p>
</div>
<script>
var nameFiled = document.getElementById('nameFiled');
var nameWarning = document.getElementById('nameWarning');
var telField = document.getElementById('telField');
var telWarning = document.getElementById('telWarning');
var emailField = document.getElementById('emailField');
var emailWarning = document.getElementById('emailWarning');
//文本框失去焦点
nameFiled.onblur = function() {
// 得到姓名
var name = nameFiled.value;
if (/^[\u4E00-\u9FA5]{2,4}$/.test(name)) {
//如果通过校验
nameWarning.style.display = 'none';
} else {
nameWarning.style.display = 'inline';
}
}
telField.onblur = function() {
// 得到电话号码
var tel = telField.value;
if (/^1\d{10}$/.test(tel)) {
//如果通过校验
telWarning.style.display = 'none';
} else {
telWarning.style.display = 'inline';
}
}
emailField.onblur = function() {
// 得到email
var tel = emailField.value;
if (/[a-zA-Z0-9_]{2,}\@[a-zA-Z0-9]{2,}\.[a-zA-Z]{2,4}(\.[a-zA-z]{2,4})?$/.test(tel)) {
//如果通过校验
emailWarning.style.display = 'none';
} else {
emailWarning.style.display = 'inline';
}
}
</script>
</body>
</html>
扫一扫
4225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
