|
【黑马程序员济南】 前端与移动开发就业班笔记事件特效：Day05
正则的使用
正则简介[JavaScript] 纯文本查看 复制代码 /**
*@author 传智播客
*/
//通过构造函数创建
var regEx = new RegExp(/\d/);//\d预定义类 表示数字 digit 数字
regEx.test("1");//可以判断传入的字符串是否符合规则 符合要求返回true不符合返回false
console.log(regEx.test("1"));//true
console.log(regEx.test("a"));//false 匹配数字 字母不行
console.log(regEx.test("a1"));//true 只要有我想要的就可以
//字面量
var regEx2 = /\d/;
//如果这个规则只是使用一次
console.log(/\d/.test("1"));
预定义类
[^\n\r] 除了换行和回车之外的任意字符 \d [0-9] 数字字符 \D [^0-9] 非数字字符 \s [\f\r\n\t\v] 不可见字符 \S [^\f\r\n\t\v] 可见字符 \w [a-zA-Z0-9_] 单词字符(所有的字母数字和_) \W [^a-zA-Z0-9_] 非单词字符 [JavaScript] 纯文本查看 复制代码 /**
*@author 传智播客
*/
console.log(/\d/.test("1"));//true
console.log(/\d/.test("a"));//false
console.log(/\s/.test("a"));//false
console.log(/\s/.test(" "));//true
console.log(/\w/.test("a"));//true
console.log(/\w/.test("1"));//true
console.log(/\w/.test("_"));//true
console.log(/\w/.test("中"));//false单词字符 指的是 英文字母 数字 下划线基础语法补充 [JavaScript] 纯文本查看 复制代码 /**
*@author 传智播客
*/
//| 表示或 或的优先级最低 () 可以提升优先级
console.log(/foot|boot/.test("foot"));//true
console.log(/foot|boot/.test("boot"));//true
console.log(/(foot)|(boot)/.test("boot"));//true
console.log(/f|boot/.test("boot"));//true
console.log(/(f|b)oot/.test("boot"));//true
console.log(/a1|b1|c1/.test("boot"));//false
console.log(/a|b|c1/.test("boot"));//true
console.log(/(a|b|c)1/.test("boot"));//false
console.log(/[abc]1/.test("boot"));//false字符类 [JavaScript] 纯文本查看 复制代码 /**
*@author 传智播客
*/
console.log("------简单类------");
console.log(/[abc]/.test("a"));
console.log(/[abc]/.test("b"));
console.log(/[abc]/.test("c"));
console.log(/[abc]/.test("d"));//false a或者b或者c都可以 其他的不行
console.log(/[abc]/.test("da"));//true 只要有我想要的就可以
console.log("------负向类------");
console.log(/[^abc]/.test("a"));//不能是a或b或c
console.log(/[^abc]/.test("b"));//不能是a或b或c
console.log(/[^abc]/.test("c"));//不能是a或b或c
console.log(/[^abc]/.test("d"));//true 不能是a或b或c d可以
console.log(/[^abc]/.test("da"));//true 只要有我想要的就可以
console.log("------范围类------");
console.log(/[abcdefghi]/.test("a"));
console.log(/[a-i]/.test("a"));
console.log(/[a-z]/.test("a"));//所有小写字母
console.log(/[A-Z]/.test("a"));//所有大写字母
console.log(/[0-9]/.test("a"));//所有数字
console.log("------组合类------");
console.log(/[a-zA-Z0-9]/.test(""));//表示所有的大小写字母还有数字
console.log(/[a-kA-N0-5]/.test(""));//组合类中的范围随意边界 [JavaScript] 纯文本查看 复制代码 /**
*@author 传智播客
*/
//只要有我想要的就可以 这种策略在表单验证中是不行的
console.log(/chuan/.test("chuan"));//true
console.log(/chuan/.test("chuang"));//true
console.log(/chuan/.test("achuan"));//true
console.log("-------------------");
//^ 表示限制开头
console.log(/^chuan/.test("chuan"));//true
console.log(/^chuan/.test("achuan"));//false开头必须是chuan
console.log(/^chuan/.test("chuang"));//true只限制开头 结尾不管
console.log("-------------------");
//$ 表示限制结尾
console.log(/chuan$/.test("chuan"));//true
console.log(/chuan$/.test("chuang"));//false结尾必须是chuan
console.log(/chuan$/.test("achuan"));//true只限制结尾 开头不管
//^$ 要什么就必须得给我什么 不能多也不能少
console.log("-------------------");
console.log(/^chuan$/.test("chuan"));//true
console.log(/^chuan$/.test("achuan"));//false
console.log(/^chuan$/.test("chuang"));//false
console.log(/^chuan$/.test("chuanchuan"));//false量词 "*" 重复零次或更多 x>=0 "+" 重复一次或更多次 x>=1 "?" 重复零次或一次 x=(0||1) {n} n次 x=n {n,} 重复n次或更多 x>=n {n,m} 重复出现的次数比n多但比m少 n<=x<=m * {0,} + {1,} ? {0,1} [JavaScript] 纯文本查看 复制代码 /**
*@author 传智播客
*/
console.log(/^a$/.test("a"));
console.log(/^a$/.test("aa"));
// "*" 重复零次或更多 x>=0
console.log("-------*------");
console.log(/^a*$/.test("a"));//表示a可以出现0次或者多次
console.log(/^a*$/.test("aaaaaa"));//表示a可以出现0次或者多次
console.log(/^a*$/.test(""));//表示a可以出现0次或者多次
console.log(/^a*$/.test("d"));//false a出现多少次都可以 但是没有说可以出现d
// "+" 重复一次或更多次 x>=1
console.log("-------+------");
console.log(/^a+$/.test("a"));
console.log(/^a+$/.test("aaaaa"));
console.log(/^a+$/.test(""));//false 一次或者多次 0次不行
// "?" 重复零次或一次 x=(0||1)
console.log("-------?------");
console.log(/^a?$/.test("a"));
console.log(/^a?$/.test(""));
console.log(/^a?$/.test("aaaa"));//false 0或者1次 多次不行
//自定义出现的次数
console.log("-------{}------");
console.log(/^a{2}$/.test("aa"));//a可以出现2次 a=2
console.log(/^a{2,}$/.test("aa"));//a可以出现2次或者更多 a>=2
console.log(/^a{2,5}$/.test("aa"));//a可以出现2次到5次 a>=2并且<=5
console.log("-------------");
console.log(/^a*$/.test("a"));//表示a可以出现0次或者多次
console.log(/^a{0,}$/.test("a"));//表示a可以出现0次或者多次
console.log(/^a+$/.test("a"));
console.log(/^a{1,}$/.test("a"));
console.log(/^a?$/.test("a"));
console.log(/^a{0,1}$/.test("a"));括号总结 {}表示次数 []表示一个字符的位置 ()表示一组 [JavaScript] 纯文本查看 复制代码 /**
*@author 传智播客
*/
//{} 是量词 用来修饰前面内容出现的次数
console.log(/^a{2}$/.test("aa"));
//[] 表示一个字符的位置
console.log(/^[abc]$/.test("c"));
//() 用来分组 可以提高优先级
console.log(/^chuan$/.test("chuan"));
console.log(/^chuan{2}$/.test("chuanchuan"));//false
console.log(/^chuan{2}$/.test("chuann"));//true
console.log(/^(chuan){2}$/.test("chuanchuan"));//true验证座机 验证姓名 完整表单验证 [HTML] 纯文本查看 复制代码 <div class="container">
<label>Q Q</label><input type="text" id="inp1"><span></span><br/>
<label>手机</label><input type="text" id="inp2"><span></span><br/>
<label>邮箱</label><input type="text" id="inp3"><span></span><br/>
<label>座机</label><input type="text" id="inp4"><span></span><br/>
<label>姓名</label><input type="text" id="inp5"><span></span><br/>
</div>[JavaScript] 纯文本查看 复制代码 /**
*@author 传智播客
*/
//获取输入框
var inpQQ = document.getElementById("inp1");
var inpMobile = document.getElementById("inp2");
var inpEmail = document.getElementById("inp3");
var inpTel = document.getElementById("inp4");
var inpName = document.getElementById("inp5");
//找规律
//QQ的规律 5到11位 开头是不为0的数字
var regQQ = /^[1-9]\d{4,10}$/; //第一位是1-9中的一个后面是数字4-10位
//手机的规律 11位数字 而且有号段限制 13[0-9] 14[57] 15[0-9] 17[1456789] 18[0-9]
//var regMobile = /^\d{11}$/;
var regMobile = /^(13[0-9]|14[57]|15[0-9]|17[1456789]|18[0-9])\d{8}$/;
//邮箱的规律
//var regEmail = /^\w+@\w+\.\w+$/;
var regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //有可能有连接字符(-+.)其后面也是接字母数字下划线，后面加*表示组中有可能是零个
var regTel = /^0\d{2,3}-\d{7,8}$/;
var regName = /^[\u4e00-\u9fa5]{2,6}$/;
//绑定事件
check(inpQQ, regQQ);
check(inpMobile, regMobile);
check(inpEmail, regEmail);
check(inpTel, regTel);
check(inpName, regName);
//每个都需要判断所以封装可以直接对其进行调用，只是以参数的形式表达，在传入对象和正则表达式就可以了。
function check(inp, regEx) {
inp.onblur = function () {
if (regEx.test(this.value)) {
this.nextSibling.innerHTML = "正确";
this.nextSibling.className = "right";
} else {
this.nextSibling.innerHTML = "错误";
this.nextSibling.className = "wrong";
}
};
}封装trim方法 [AppleScript] 纯文本查看 复制代码 /**
*@author 传智播客
*/
//去掉两端的空白符
var str = " aa aa ";
console.log(str);
//str = str.replace(/^\s+|\s+$/g, "");
str = trim(str);
console.log(str);
//封装 去掉两端空格的兼容函数
function trim(str) {
return str.replace(/^\s+|\s+$/g, "");
}递归 [JavaScript] 纯文本查看 复制代码 /**
*@author 传智播客
*/
//求n个数的累加
//getSum(1) = 1
//getSum(2) = 2+1
//getSum(3) = 3+2+1
//getSum(3) = 3+getSum(2)
//getSum(n) = n+getSum(n-1)
function getSum(n) {
if (n === 1) {
return 1;
}
var sum = n + getSum(n - 1);
return sum;
}
//console.log(getSum(5));
//求n的阶乘
//getJC(1) = 1
//getJC(2) = 2*1
//getJC(3) = 3*2*1
//getJC(3) = 3*getJC(2)
//getJC(n) = n*getJC(n-1)
function getJC(n) {
if (n === 1) {
return 1;
}
var jc = n * getJC(n - 1);
return jc;
}
//console.log(getJC(3));
//求Fibonacci的第n个数1 1 2 3 5 8 13 21...
//2 = 1 + 1
//getFib(3) = getFib(1)+getFib(2)
//3 = 2 + 1
//getFib(4) = getFib(2)+getFib(3)
//getFib(n) = getFib(n-2)+getFib(n-1)
function getFib(n) {
if (n === 1 || n === 2) {
return 1;
}
var fib = getFib(n - 2) + getFib(n - 1);
return fib;
}
console.log(getFib(12));//144
如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友，那就快来吧！
黑马程序员济南中心联系电话：0531-55696830
| 
收藏
淘帖
踩
