正则概述
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//正则定义。（1.内置对象法。 2.字面量）
//1.对象定义法
var reg1 = new RegExp(/abc/);
//2.字面量[]{}/a/
var reg2 = /def/;
console.log(reg2);
console.log(typeof reg2);
//使用：test();正则表带是有一个方法，test，有一个返回值是bool类名，决定参数是否符合正则表达式
console.log(reg1.test("abc"));
console.log(/abc/.test("hjkl"));
</script>
</body>
</html>
五大内部类
预定义类
50BBDFA4-A9CB-48BA-8583-32464F8781E7.png
//. [^\n\r] 除了换行和回车之外的任意字符(“”不行)
// console.log(/./.test("\n\r")); //false
// console.log(/./.test("adsfadsgdfgdfg")); //true
//\d [0-9] 数字字符 \D [^0-9] 非数字字符
// console.log(/\d/.test(123)); //true
// console.log(/\d/.test("adsfadsgdfgdfg")); //false
//
//\s [ \t\n\x0B\f\r] 空白字符 \S [^ \t\n\x0B\f\r] 非空白字符
// console.log(/\s/.test(" ")); //true
// console.log(/\s/.test("asdfadsf")); //false
//\w [a-zA-Z_0-9] 单词字符 \W [^a-zA-Z_0-9] 非单词字符
// console.log(/\w/.test("$")); //false
// console.log(/\w/.test("_")); //true
简单类
//必须是完整的，只多不能少
console.log(/chaoge/.test("chaoge")); //true
console.log(/chaoge/.test("chaogenihao")); //true
console.log(/chaoge/.test("nihaochaoge")); //true
console.log(/chaoge/.test("chaonihaoge")); //false
console.log(/chaoge/.test("chao")); //false
//
//只要包含里面的任何一个就可以
console.log(/[chaoge]/.test("chaoge")); //true
console.log(/[chaoge]/.test("chaogenihao"));//true
console.log(/[chaoge]/.test("nihaochaoge"));//true
console.log(/[chaoge]/.test("chaonihaoge"));//true
console.log(/[chaoge]/.test("chao"));//true
console.log(/[chaoge]/.test("a;ljr jglkrj grjgr"));//true
console.log(/[chaoge]/.test("*"));//false
负向类
//不够和正好，返回 false;多了或者没有返回 true
// console.log(/[^abc]/.test("iiii"));//true
// console.log(/[^abc]/.test("aiiii"));//只有一部分睁一只眼闭一只眼true
// console.log(/[^abc]/.test("abc"));//false
// console.log(/[^abc]/.test("b"));//false
// console.log(/[^abc]/.test("bcdef"));//只有一部分睁一只眼闭一只眼true
// console.log(/[^abc]/.test("abcdef"));//只有一部分睁一只眼闭一只眼true
范围类
// console.log(/[a-c]/.test("dghhj")); //false
// console.log(/[a-c]/.test("b")); //true
组合类
console.log(/[a-c1-6]/.test("dghhj")); //false
console.log(/[a-c1-6]/.test("b")); //true
console.log(/[a-c1-6]/.test(8)); //false
console.log(/[a-c1-6]/.test(3)); //true
console.log(/[a-c1-6]/.test("addddd")); //true
正则边界
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//边界必须是abc
console.log(/^abc$/.test("abc")); //true
console.log(/^abc$/.test("a")); //false
console.log(/^abc$/.test("ac")); //false
console.log(/^abc$/.test("abcabc")); //false
</script>
</body>
</html>
量词
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//量词 （ *+? {} ）
//a的个数要 >=0
console.log(/^a*$/.test("b")); //false
console.log(/^a*$/.test(""));
console.log(/^a*$/.test("a"));
console.log(/^a*$/.test("aa"));
console.log(/^a*$/.test("aaa"));
console.log(/^a*$/.test("aaaa"));
console.log(/^a*$/.test("aaaab")); //false
//a的个数要 >=1
console.log(/^a+$/.test("b")); //false
console.log(/^a+$/.test("")); //false
console.log(/^a+$/.test("a"));
console.log(/^a+$/.test("aa"));
console.log(/^a+$/.test("aaa"));
console.log(/^a+$/.test("aaaa"));
console.log(/^a+$/.test("aaaab")); //false
//a的个数要么0，要么1；
console.log(/^a?$/.test("b")); //false
console.log(/^a?$/.test("")); //true
console.log(/^a?$/.test("a")); //true
console.log(/^a?$/.test("aa")); //false
console.log(/^a?$/.test("aaa")); //false
console.log(/^a?$/.test("aaaa")); //false
console.log(/^a?$/.test("aaaab")); //false
//{n} 一个参数，循环n次。
//{n,} 一个参数，循环>=n次。
//{n,m} 一个参数，循环n次到m次。
console.log(/^a{1}$/.test("a"));
console.log(/^a{1,}$/.test("aa"));
console.log(/^a{1,4}$/.test("aaa"));
console.log(/^a{1,4}$/.test("aaaa"));
console.log(/^a{1,4}$/.test("aaaaa")); //false
//括号提高运算优先级，| 前后有一个符合就可以
console.log(/(abc)|(xyz)/.test("ab")); //false
console.log(/(abc)|(xyz)/.test("abcd")); //true
console.log(/(abc)|(xyz)/.test("xy")); //false
console.log(/(abc)|(xyz)/.test("xyzaaa")); //true
console.log(/(abc)|(xyz)/.test("abxy")); //false
</script>
</body>
</html>
09-验证固定电话号.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box">
<input type="text"/>
<span>请输入！</span>
</div>
<script>
//需求：验证座机号！
//直辖市：三位-八位（010-82935150）
//普通市：四位-七位（0314-3160186）
//步骤：
//1.老三步。
//2.判断input里面的 值，是否符合正则标准。
//3.符合给一个样式，不符合给另外一个样式。
//1.老三步。
var inp = document.getElementsByTagName("input")[0];
var span = inp.nextElementSibling || inp.nextSibling;
inp.onblur = function () {
//2.判断input里面的值，是否符合正则标准。
// var reg1 = /^0\d{2}-8\d{7}$/;
// var reg1 = /^0\d{3}-3\d{6}$/;
//两个都要执行
var reg1 = /(^0\d{2}-8\d{7}$)|(^0\d{3}-3\d{6}$)/;
if(reg1.test(inp.value)){
//3.符合给一个样式，不符合给另外一个样式。
span.style.color = "green";
span.innerHTML = "恭喜您，输入正确！";
}else{
span.style.color = "red";
span.innerHTML = "对不起，您输入的为非法字符！";
}
}
</script>
</body>
</html>
10-验证中文名字.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box">
<input type="text"/>
<span>请输入！</span>
</div>
<script>
//需求：输入名字，两位-四为。
//原理: unicode（\u4e00-\u9fa5）编码{2,4}
//步骤：
//1.老三步
//2.判断input中的value值是否符合正则标准
//3.符合给一个样式，不符合给另外一个样式
//1.老三步
var inp = document.getElementsByTagName("input")[0];
var span = inp.parentNode.children[1];
inp.onblur = function () {
//unicode（\u4e00-\u9fa5）编码{2,4}
var reg = /^[\u4e00-\u9fa5]{2,4}$/;
//2.判断input中的value值是否符合正则标准
if(reg.test(this.value)){
//3.符合给一个样式，不符合给另外一个样式
span.style.color = "green";
span.innerHTML = "恭喜您，输入正确！";
}else{
span.style.color = "red";
span.innerHTML = "对不起，您输入的为非法字符！";
}
}
</script>
</body>
</html>
11-三个方法.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//trim();去除前后的空格
// var str = " 你好 我很好！ ";
// console.log(str);
// console.log(str.trim());
//replace(); 替换和全局替换值。 i忽略大小写 g全部替换
// var str = "Today is fine day,today is fine day!"
// console.log(str);
// console.log(str.replace(/today/ig,"tomorrow"));
//search(); 给字符差索引
var str = "abcdefg";
console.log(str.search(/bc/));
console.log(str.indexOf("bc"));
</script>
</body>
</html>
12-trim封装.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var str = " 你好，我 很好！ ";
console.log(str);
// console.log(str.trim());
console.log(trim(str));
function trim(str){
var aaa = str.replace(/(^\s+)|(\s+$)/g,"");
return aaa;
}
//面向对象学习
// String.prototype.aaa = function () {
// var aaa = str.replace(/(^\s+)|(\s+$)/g,"");
// return aaa;
// }
// console.log(str.aaa());
</script>
</body>
</html>
网友评论