威海北京网站建设,和平网站制作,淘宝客怎样做网站,设计构建网站一、基本认识
1. 什么是正则表达式 正则表达式(regular expression)描述了字符串构成模式#xff0c;经常被用于检查字符串是否符合预定的格式要求。 用一个例子快速演示正则表达式基本使用方法#xff1a;检查某个字符串是否是6位数字 // 要检查的字符串va…一、基本认识
1. 什么是正则表达式 正则表达式(regular expression)描述了字符串构成模式经常被用于检查字符串是否符合预定的格式要求。 用一个例子快速演示正则表达式基本使用方法检查某个字符串是否是6位数字 // 要检查的字符串var str 456789;// 正则表达式规则var regexp /^\d{6}$/; // 检查if (regexp.test(str)) {alert(符合规则); } else {alert(不符合规则); }/^\d{6}$/就是正则表达式它描述了字符串必须是6位数字的构成规则。正则表达式可以调用test()方法检查某字符串是否符合正则表达式规定的规则。 正则表达式按位描述规则 正则表达式按位描述规则是指它是一位一位的描述字符串的构成形式。比如检查字符串是不是这样的以字母m开头然后是3个数字最后以字母n结尾。 // ^表示开头$表示结尾\d 表示数字 \d\d\d也可以写作\d{3}/^m\d\d\dn$/二、基本使用
1. 正则表达式的创建
使用/内容/的语法形式可以快速创建正则表达式。也可以使用new RegExp(内容)的形式创建正则表达式。使用typeof运算符检查正则表达式的类型结果是object。!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript// 创建正则表达式方法1var regexp1 /^\d{6}$/;// 创建正则表达式方法2var regexp2 new RegExp(^\\d{6}$);var str 555666;console.log(regexp1.test(str)); // trueconsole.log(regexp2.test(str)); // trueconsole.log(typeof regexp1); // objectconsole.log(typeof regexp2); // object/script
/body
/html2. 元字符 元字符是指一位指定类型的字符 元字符功能\d匹配一个数字\D匹配一个非数字字符\w匹配一个单字字符(字母、数字或者下划线)\W匹配一个非单字字符\s匹配一个空白字符包括空格、制表符和换行符.任意字符 开头和结尾 元字符功能^匹配开头$匹配结尾 元字符注意事项 如果使用new RegExp()写法反斜杠需要多写一个。比如/^\d$/和new RegExp(^\\d$)是相同的意思 元字符使用举例 某快递公司运单号形式是这样的:123-4567-890请使用正则表达式检查某字符串是否符合此格式某产品的验证秘钥形式是这样的:□□□-□□□□-□□□其中□表示字母数字或者下划线请使用正则表达式检查某字符串是否符合此格式 字符的转义 在特殊字符之前的反斜杠\表示下一个字符不是特殊字符应该按照字面理解。 /^.$/检查字符串是不是任意字符 /^\.$/检查字符串是不是一个点 /^\\$/检查字符串是不是一个反斜杠不管一个符号有没有特殊意义都可以在其之前加上一个\以确保它表达的是这个符号本身。举例某产品批号形式为123.45^67#89请使用正则表 达式检查某字符串是否符合此格式 代码演示 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript// 题目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
/body
/html3. 方括号表示法 使用方括号比如[xyz]可以创建一个字符集合表示匹 配方括号中的任意字符。 比如某学校的学号规定第1位是一个字母b表示本科生y表示研究生后面是7位数字用正则表示为 /^[by]\d{7}$/可以使用短横-来指定一个字符范围^表示否定 元字符等价的方括号表示法\d[0-9]\D[^0-9]\w[A-Za-z0-9]\W[^A-Za-z0-9] 方括号表示法小题目 题目1请验证某字符串是否是5位字母大小写均可题目2请验证某字符串是否是5位且仅有小写字母、点构成题目3请验证某字符串是否是4位小写字母且最后一位不能是m字母!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyscript// 某学校的学号规定第1位是一个字母b表示本科生y表示研究生后面是7位数字用正则表示为// 学号字符串var str1 m4444555;// 用正则表达式进行检查console.log(/^[by]\d{7}$/.test(str1));// *******************************************// 题目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
/body/html4. 量词
量词意义*匹配前一个表达式0次或多次。等价于{0,}匹配前面一个表达式1次或者多次。等价于{1,}?匹配前面一个表达式0次或者1次。等价于{0,1}{n}n是一个正整数匹配了前面一个字符刚好出现了n次{n,}n是一个正整数匹配前一个字符至少出现了n次{n, m}n和m都是整数。匹配前面的字符至少n次最多m次
量词小题目 题目1请验证字符串是否符合手机号码的规则11位数字并且肯定以1开头。题目2请验证某字符串是否是这样的以字母开头中间是任意位数字(最少1位)构成并以字母结尾。题目3请验证某字符串是否符合网址规则以www.开头中间是任意位的字符(字母数字下划线)最后以.com结尾也可以以.com.cn结尾!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript// 题目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)?$/;console.log(regexp3.test(str7));console.log(regexp3.test(str8));console.log(regexp3.test(str9));/script
/body
/html5. 修饰符 修饰符也叫作标志(flags)用于使用正则表达式实现高 级搜索 修饰符意义i不区分大小写搜索g全局搜索 修饰符的使用 var re /m/gi;var re new RegExp(m, gi);在正则表达式的第二个/后面写修饰符可以多个连写。new RegExp()形式的正则表达式以字符串形式写在第二个参数
三、相关方法
1. 正则表达式可以打点调用哪些方法呢?
方法简介test()测试某字符串是否匹配正则表达式返回布尔值exec()根据正则表达式在字符串中进行查找返回结果数组或者null test()方法 正则表达式的test()方法用来测试某字符串是否匹配此正则表达式它返回true或false /^[a-z]{3}[a-ln-z]$/.test(abcd)exec()方法 exec()方法功能是在一个指定字符串中执行一个搜索匹配查找返回一个结果数组或null var str abc123def456ghi789;var regexp /\d/;var result1 regexp.exec(str);exec()方法的逐条遍历 exec()方法最有趣的是有g修饰符的正则表达式将自动成为有状态的 这意味着可以对单个字符串中的多次匹配结果进行逐条的遍历。 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyscriptvar str abc123def456ghi789;var regexp /\d/g; // 表示贪婪的尽可能多的匹配var result1 regexp.exec(str);var result2 regexp.exec(str);var result3 regexp.exec(str);var result4 regexp.exec(str);console.log(result1);console.log(result2);console.log(result3);console.log(result4);// 使用循环语句来循环执行exec寻找所有的匹配结果var result;while (result regexp.exec(str)) {console.log(result);}/script
/body/html字符串的相关方法 方法简介search()在字符串中根据正则表达式进行查找匹配返 回首次匹配到的位置索引测试不到则返回-1match()在字符串中根据正则表达式进行查找匹配返 回一个数组找不到则返回nullreplace()使用替换字符串替换掉匹配到的子字符串可以使用正则表达式split()分隔字符串为数组可以使用正则表达式!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptvar str abc123def4567ghi89;// search()方法很像indexOf()返回查找到的第一个下标如果找不到就是-1var result1 str.search(/\d/g);var result2 str.search(/m/g);console.log(result1); // 3console.log(result2); // -1// match()方法返回查找到的数组找不到就是nullvar 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
/body
/html四、应用 用正则表达式进行表单验证 用正则表达式进行表单验证是正则表达式最重要的实际应用!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.warning {color: red;display: none;}/style
/headbodydivp请输入中文姓名input typetext idnameFieldspan classwarning idnameWarning输入的姓名不合法/span/pp请输入手机号码input typetext idtelFieldspan classwarning idtelWarning输入的手机号码不合法/span/pp请输入Emailinput typetext idemailFieldspan classwarning idemailWarning输入的Email不合法/span/p/divscriptvar nameField document.getElementById(nameField);var telField document.getElementById(telField);var emailField document.getElementById(emailField);var nameWarning document.getElementById(nameWarning);var telWarning document.getElementById(telWarning);var emailWarning document.getElementById(emailWarning);// 当文本框失去焦点就是光标不在文本框中了nameField.onblur function () {// 得到姓名var name nameField.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 () {// 得到emailvar email emailField.value;// 合法的email都是abc_def123abc.netif (/^\w{2,}\\w{2,}\.[a-z]{2,4}(\.[a-z]{2,4})?$/.test(email)) {// 如果通过校验emailWarning.style.display none;} else {// 如果没有通过校验emailWarning.style.display inline;}};/script
/body/html重点内容 元字符、量词、方括号表示法正则表达式和字符串的常用方法
