一、为什么需要正则表达式
-
严谨的验证文本框中的内容
-
简洁的代码
二、正则表达式的定义
-
正则表达式是一个描述字符模式的对象
-
通途来说，就是匹配字符串的，约定字符串必须遵循某种格式，遵循了就是合法的，否则不合法
-
组成：一个正则表达式就是普通字符（例如字符a到z）以及特殊字符（称元字符）
三、常用的正则表达式（记住）
//邮编：250000
let code = /^\d{6}$/; //\d代表0-9的任意数字，{n}前一项出现的次数
//手机号：1开头，11位
let tel = /^1\d{10}$/;
//身份证号18位
let cardId = /^\d{18}$/;
//邮箱：975297443@qq.com
//必须包含@和.，并且圆点可能出现1-2次，圆点必须在@的后面
let email = /^\w+@\w+(\.\w+){1,2}$/;//+代表的是匹配前一项1次或多次
//固定电话：0531-88881234，010-0000000
let phone = /^\d{3,4}-\d{7,8}$/;
//年龄：0-120
//0-9：\d
//10-99：[1-9]\d
//100-119：1[0-1]\d
//120：120
let age = /^120$|^(1[0-1]|[1-9])?\d$/;//?表示匹配前一项0次或1次四、创建正则表达式
//判断字符串中那个是否包含字符a
//第一种方式：通过//，也就是两个斜杠
let reg = /a/gim;
//第二种方式：通过构造函数
//let re = new RegExp();//RegExp是一个构造函数
//但是像上面这样写没有任何效果，需要将正则表达式的内容作为字符串传递给构造函数
let re = new RegExp('a');//最简单的正则表达式，匹配字符a
let re = new RegExp('a','gi');//第一个参数是正则表达式的文本内容，第二个参数是可选项标志
//g：全文查找
//i:忽略大小写
//m：多行查找五、常用方法
-
正则表达式对象的常用方法
//test()：检查指定的字符串是否存在，返回值为boolean类型 let data = "121212Cat"; let regCat = /cat/gi; document.write(regCat.test(data) + "<br>");//true //exec：返回查询值，如果字符串中有匹配的值则返回该匹配值，否则返回null let data2 = "123,123,213,345,Cat,cat,grd,CAT,Dog"; let regCat2 = /cat/gi; document.write(regCat2.exec(data2));//Cat -
字符串的常用方法（配合正则表达式使用）
//test()：检查指定的字符串是否存在，返回值为boolean类型 let data = "121212Cat"; let regCat = /cat/gi; document.write(regCat.test(data) + "<br>");//true //exec：返回查询值，如果字符串中有匹配的值则返回该匹配值，否则返回null let data2 = "123,123,213,345,Cat,cat,grd,CAT,Dog"; let regCat2 = /cat/gi; document.write(regCat2.exec(data2) + "<br>");//Cat //字符串的方法 let data3 = "123,123,213,345,Cat,cat,grd,CAT,Dog"; let regCat3 = /cat/gi; //match()：得到查询数组 document.write(data3.match(regCat3) + "<br>");//Cat,cat,CAT //search()：返回搜索位置，类似于indexOf，没有匹配到返回-1 document.write(data3.search(regCat3) + "<br>");//16 //replace()：替换字符，利用正则替换 document.write(data3.replace(regCat3,"dog")); //split()：以正则表达式指定字符分隔字符串，得到数组 //let arr = data3.split(regCat3); let re = /\,/; let arr = data3.split(re); for (let i = 0; i < arr.length; i++) { alert(arr[i]); } -
应用
function checkTel() { //获取输入手机号 let tel = document.getElementById("tel").value; //创建匹配手机号的正则表达式 let regTel = /^1\d{10}$/; if (!regTel.test(tel)) { document.getElementById("msg").innerHTML = "手机号不符合规范"; return false; } else { document.getElementById("msg").innerHTML = ""; } }
六、下拉框的级联操作
-
select
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="fruit" id="fruit" onchange="getFruit()"> <option value="apple">苹果</option> <option value="banana">香蕉</option> <option value="orange">橘子</option> </select> <div id="info"></div> <script> function getFruit() { //获取下拉框 let mySelect = document.getElementById("fruit"); //获取下拉列表中选项的数目 let len = mySelect.length //获取选中项的value属性值 for (let i = 0; i < len; i++) { //判断选项是否被选中，选中返回true if (mySelect[i].selected) { alert(mySelect[i].value); } } //获取被选项的索引号(选中项下标，从0开始) let index = mySelect.selectedIndex; //直接获取选中项的value属性值 let fruitValue = mySelect.value; //获取选中项的text文本值 let fruitName = mySelect.options[index].text; //获取div let myDiv = document.getElementById("info") myDiv.innerHTML = "选择的水果是：" + fruitValue + "-" + fruitName + "，下标是" + index + "，下拉选项的数目是：" + len; } </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="province" id="province" onchange="getCity()"> <option value="">请选择省份</option> <option value="山东省">山东省</option> <option value="河南省">河南省</option> <option value="河北省">河北省</option> </select> <select name="city" id="city"> <option value="">请选择城市</option> </select> <script> function getCity() { //获取选择的省份 let province = document.getElementById("province").value; //获取市级的下拉框 let citySel = document.getElementById("city"); //向市级下拉框添加数据之前先将数据清空 citySel.length = 0; switch(province) { case "山东省": //add(option,index);向下拉框添加选项，option代表要添加的选项 //index在该下标之前添加，如果是null，表示添加在末尾 //创建选项：new Option(text,value)，value可以省略 citySel.add(new Option("请选择城市",""),null); citySel.add(new Option("济南市","济南市"),null); citySel.add(new Option("德州市","德州市")); citySel.add(new Option("泰安市","泰安市")); break; case "河南省": citySel.add(new Option("请选择城市",""),null); citySel.add(new Option("郑州市","郑州市"),null); citySel.add(new Option("洛阳市","洛阳市")); break; case "河北省": citySel.add(new Option("请选择城市",""),null); } } </script> </body> </html> -
数组：
//创建数组 let arr1 = [];//创建空数组 //或者：let arr1 = [];//创建空数组 //给数组赋值： arr1[0] = "hello"; arr1[1] = "world"; //创建数组并赋值 let arr2 = ["hello","world"] //或者：let arr2 = new Array("hello","world") //创建数组并指明数组长度 let arr3 = new Array(4);//长度可省略 //数组的方法 //join()：把数组的所有元素放入一个字符串，通过分隔符进行分隔 let str = arr1.join("-"); document.write(str + "<br>"); //sort()：对数组进行排序 let arr4 = ['d', 's', 'a', 'f', 'e', 'm']; let arr5 = arr4.sort(); document.write(arr5.join(",")); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="province" id="province" onchange="getCity()"> <option value="">请选择省份</option> <option value="山东省">山东省</option> <option value="河南省">河南省</option> <option value="河北省">河北省</option> </select> <select name="city" id="city"> <option value="">请选择城市</option> </select> <script> let cityArr = new Array(); //把所有省份的城市放在cityArr中 cityArr["山东省"] = ["请选择城市","济南市","德州市"]; cityArr["河南省"] = ["请选择城市","郑州市","洛阳市"]; cityArr["河北省"] = ["请选择城市","石家庄市","邯郸市"]; function getCity() { //获取选择的省份 let province = document.getElementById("province").value; let citySel = document.getElementById("city"); //清空数据 citySel.length = 0; for(let i in cityArr){//i是谁？ 是山东省、。。。 if (i == province) { for (let j in cityArr[i]) {//j是0，1 //获取城市cityArr[i][j] citySel.add(new Option(cityArr[i][j],cityArr[i][j])); } } } } </script> </body> </html>
461
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
