正则表达式的使用
- 正则表达式在线验证工具: https://c.runoob.com/front-end/854
- MDN中正则表达式：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
- 正则表达式的使用：匹配、提取、替换
3.1、匹配 test()方法：
<script>
// 内置对象 RegExp
// 第一个参数 模式pattern 字符串类型
// 第二个参数 flag i 忽略大小写 g 全局匹配 字符串
var regularExpression = new RegExp('ab[a-z]', 'i');
var str = 'aB6';
console.log(regularExpression.test(str));
// 结果：false
//在后面添加是否忽略大小写
var regularExpression = /ab[a-z]/i;
var str = 'aBd';
console.log(regularExpression.test(str));
// 结果：true
</script>
3.1.1、表单验证：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
QQ号：<input type="text" id="txtQQ"><span></span><br>
邮箱：<input type="text" id="txtEMail"><span></span><br>
手机：<input type="text" id="txtPhone" ><span></span><br>
生日：<input type="text" id="txtBirthday"><span></span><br>
姓名：<input type="text" id="txtName"><span></span><br>
<script>
// 1 验证QQ号
addCheck('txtQQ', /^\d{5,12}$/, '请输入正确的QQ号格式');
// 2 验证电子邮箱
addCheck('txtEMail', /^\w+@\w+(\.\w+)+$/, '请输入正确的EMail号格式');
// 3 手机号
addCheck('txtPhone', /^[1-9]\d{10}$/, '请输入正确的手机号码格式');
// 4 验证日期
addCheck('txtBirthday', /^\d{4}-\d{1,2}-\d{1,2}$/, '请输入正确的日期格式')
// 5 验证姓名
addCheck('txtName', /^[\u4e00-\u9fa5]{2,4}$/, '请输入2-4个汉字')
// 文本框的验证封装成一个函数
// 第一个参数是元素的id
// 第二个参数 正则表达式对象 RegExp
// 第三个参数 是提示的文本
function addCheck(elementId, reg, tip) {
var element = document.getElementById(elementId);
element.onblur = function () {
var span = this.nextElementSibling;
// 验证
if (!reg.test(this.value)) {
span.innerText = tip;
span.style.color = 'red';
} else {
span.innerText = '';
span.style.color = '';
}
}
}
</script>
</body>
</html>
3.2、提取：
<script>
// 1. 提取工资
var str = '张三：1000，李四：5000，王五：8000。';
var reg = /\d+/g;
// 提取多个内容
console.log(str.match(reg));
// 结果：(3) ["1000", "5000", "8000"]
// 0: "1000"
// 1: "5000"
// 2: "8000"
// length: 3
// __proto__: Array(0)
//2. 提取email地址
var str =
'123123@xx.com,fangfang@valuedopinions.cn 这是其它内容 286669312@qq.com 2、emailenglish@emailenglish.englishtown.com 286669312@qq.com...';
var reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/g;
console.log(str.match(reg));
//结果：(5) ["123123@xx.com", "fangfang@valuedopinions.cn", "286669312@qq.com", "emailenglish@emailenglish.englishtown.com", "286669312@qq.com"]
// 0: "123123@xx.com"
// 1: "fangfang@valuedopinions.cn"
// 2: "286669312@qq.com"
// 3: "emailenglish@emailenglish.englishtown.com"
// 4: "286669312@qq.com"
// length: 5
// __proto__: Array(0)
console.log(str.match(reg).length);
//结果：5
console.log(str.match(reg)[0]);
//结果：123123@xx.com
// 3. 分组提取
// 3. 提取日期中的年部分 2015-5-10
var dateStr = '2015-1-5';
var reg = /(\d{4})-(\d{1,2})-(\d{1,2})/;
console.log(reg.test(dateStr));
//结果：true
console.log(reg.exec(dateStr));
//结果：(4) ["2015-1-5", "2015", "1", "5", index: 0, input: "2015-1-5", groups: undefined]
// 0: "2015-1-5"
// 1: "2015"
// 2: "1"
// 3: "5"
// groups: undefined
// index: 0
// input: "2015-1-5"
// length: 4
// __proto__: Array(0)
console.log(dateStr.match(reg));
//结果：(4) ["2015-1-5", "2015", "1", "5", index: 0, input: "2015-1-5", groups: undefined]
// 0: "2015-1-5"
// 1: "2015"
// 2: "1"
// 3: "5"
// groups: undefined
// index: 0
// input: "2015-1-5"
// length: 4
// __proto__: Array(0)
// 4. 提取邮件中的每一部分
var str = 'xxxx@itcast.com';
var reg = /(\w+)@(\w+)\.(\w+)/;
console.log(reg.test(str));
//结果：true
console.log(reg.exec(str));
//结果：(4) ["xxxx@itcast.com", "xxxx", "itcast", "com", index: 0, input: "xxxx@itcast.com", groups: undefined]
// 0: "xxxx@itcast.com"
// 1: "xxxx"
// 2: "itcast"
// 3: "com"
// groups: undefined
// index: 0
// input: "xxxx@itcast.com"
// length: 4
// __proto__: Array(0)
console.log(RegExp.$1);
//结果：xxxx
console.log(RegExp.$2);
//结果：itcast
console.log(RegExp.$3);
//结果：com
</script>
3.2.1 分割：
<script>
// 1. 提取日期中的年部分 2015-5-10
/* var dateStr = '2015-1-5';
console.log(dateStr.split('-')); */
// 结果：Array(3)
// 0: "2015"
// 1: "1"
// 2: "5"
// length: 3
// __proto__: Array(0)
/* var dateStr = '2015-1-5';
console.log(dateStr.split(/[/-]/)); */
// 结果:(3) ["2015", "1", "5"]
// 0: "2015"
// 1: "1"
// 2: "5"
// length: 3
// __proto__: Array(0)
// 2. 提取邮件中的每一部分
var str = 'xxxx@itcast.com';
console.log(str.split(/[@\.]/));
// 结果:(3) ["xxxx", "itcast", "com"]
// 0: "xxxx"
// 1: "itcast"
// 2: "com"
// length: 3
// __proto__: Array(0)
</script>
3.3 替换
<script>
// 1. 替换所有空白
var str = " 123AD asadf asadfasf adf ";
// trim() 去除前后的空格
console.log(str.trim());
// 结果：123AD asadf asadfasf adf
// replace() 只能替换掉第一个查找到的内容
console.log(str.replace('a', 'x'));
// 结果： 123AD xsadf asadfasf adf
// \s 匹配一个空白字符，包括空格、制表符、换页符和换行符。
console.log(str.replace(/\s/g, ''));
// 结果:123ADasadfasadfasfadf
console.log(str.split(' ').join(''));
// 结果:123ADasadfasadfasfadf
// 2. 把所有,和，替换为.
var str = "abc,efg,123，abc,123，a";
console.log(str.replace(/,|，/g, '%'));
// 结果:abc%efg%123%abc%123%a
</script>
打下了1/2的江山
浙公网安备 33010602011771号