Js正则表达式
正则表达式
js正则表达式思维导图
https://www.processon.com/view/link/5add4ef9e4b04691064d5e37
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//RegExp对象 正则表达式：检索字符串 用来规定文本搜索的内容
//创建正则对象方式1 构造函数创建 new RegExp("检测的文本，就是你要匹配的字符串","修饰符，有两个i不区分大小写和g全局匹配")
//参数1 正则表达式（不能有空格）
//参数2 匹配模式：常用g（全局匹配；找到所有匹配，而不是第一个匹配后停止）和i（忽略大小写吧）
var str = 'hello World';
var reg1 = new RegExp('e','ig');
console.log(reg1) // /e/gi
//2.字面量方式创建（常用的方式）；直接两个//中间插入我们要检测的文本，后边gi是修饰符
var reg2 = /o/gi;//检测字符e，不区分大小写，全局匹配
//正则对象提供的检索方式
//test() 检测字符串中是否包含定义字符模式，返回布尔
//要检索的字符在字符串str中 返回true
console.log(reg2.test(str)); //true 看看匹配的规则是否在str这个字符串里边，如果在返回true，不在返回false
//2.2 exec()用来检索字符串中正则表达式的匹配； 如果匹配到了就返回一个存放有结果的数组，如果没有匹配到就返回一个null
console.log(reg2.lastIndex); //5 保存一次匹配时开始的下标，lastIndex是取到最后一次的索引；
console.log(reg2.exec(str)); //["o", index: 7, input: "hello world"]
console.log(reg2.lastIndex); //8 //下一个要检索的索引，最后一个//3.常用方法
//match
var reg3 = /o/g;
使用正则表达式模式对字符串执行查找，并将包含查找的结果作为数组返回
console.log(str.match(reg3)) // （2）["o","o"] 0:"o" 1:"o"
//2.replace替换： str.replace(被替换的，替换的)
console.log(str.replace(reg3,'*')); //hell* W*rld
//3.search()
console.log(str.search(reg3));//查询字符串在字符中出现的位置 下标 4
//4.split() 以匹配的规则分割
console.log(str.split(reg3)); //（3）["hell", "W", "rel"]
</script>
</html>
元字符
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload = function (){ //元字符 //..............1.单个字符和数字..................................................... //1 . 匹配除换行符以为的任意字符 var str = "oweb"; // var str = "luffycity 2018"; //["l", index: 0, input: "luffycity 2018"] var reg = /./g; console.log(reg.exec(str)); //["o", index: 0, input: "oweb"] var str = "www.baidu.com"; var reg = /www\......\.com/g; //如果想不让字符有其他意义 转义\ \.表示匹配；www.baidu.com console.log(reg.exec(str)); // ["www.baidu.com", index: 0, input: "www.baidu.com"] //2. [] 匹配[]里面的任意一个字符 var str1 = "4awebadsads"; var reg1 = /[a-zA-Z0-9]/g; // 匹配字母还是数字 console.log(reg1.exec(str1)); // ["4", index: 0, input: "4awebadsads"] var str2 = "1s34"; var reg2 = /[0-9][0-9][0-9]/g; console.log(reg2.exec(str2));//三个[]号就要匹配三个；1、s不符合过 3符合可以、4 //3. [^] 所有不在这个范围内的字符 var str3 = "abdG"; var reg3 = /[^a-z]/g; //匹配除小写字母以外的任意字符 console.log(reg3.exec(str3)); //["G", index: 3, input: "abdG"] //4. \d:匹配数字 对立\D:匹配非数字 var str4 = "web"; var reg4 = /\d/g; //匹配数字 var reg5 = /\D/g; //非数字 console.log(reg4.exec(str4)); //null console.log(reg5.exec(str4)); //w //5. \w:匹配数字、字母、下划线 \W:匹配除数字、字母、下划线以外的任意字符 var reg6 = /\w/g; //匹配数字 字母 下划线_ var reg7 = /\W/g; //匹配除数字 字母 下划线以外的任意字符 console.log(reg6.exec(str4)); //w console.log(reg7.exec(str4)); //null //6. \s:匹配空格 trim() var reg8 = /\s/g; //空格 var reg9 = /\S/g; //非空白字符 console.log(reg8.exec(str4)); //null console.log(reg9.exec(str4)); //w //7 锚字符 ^以什么开头 $以什么结尾 var str = "www.luffy.com"; var reg10 = /^www/g; // ^字符 console.log(reg10.exec(str)); var reg11 = /^www\......\.com$/g; //字符$ console.log(reg11.exec(str)); //www.luffy.com //.........................2.重复的字符....................... //? 匹配前面的字符0个或一个 ， var strs = "123webr44546ere"; var reg12 = /[0-9]?/g; console.log(reg12.exec(strs)); //"1" //* 匹配0个或任意多个字符 尽可能多的匹配 var reg13 = /[a-z]*/g; //匹配小写字母，0个或多个 console.log(reg13.exec(strs)); //'' 空字符串 //+ 至少匹配一次 var reg14 = /\d+/g; //匹配多个数字 console.log(reg14.exec(strs)); //123 //{10}: 匹配连续的10个数字 var stra = "11274567800"; var rega = /^1\d{10}$/g; //匹配连续的10个数字 ;以1开头后面连续匹配10个数字结尾 console.log(rega.exec(stra)); //{min,max}最少min个最多max个； {1,4} 最少一个最多4个 var strb = "edg"; var regb = /^[a-zA-z]{2,3}$/g; //以大小英文字母结尾开头并且最少2个最多3个字母结尾。 console.log(regb.exec(strb)); /edg // |: 竖线 或者 var strc = "www.google"; //baidu google luffycity var regc = /www.baidu|google|luffycity/g; console.log(regc.exec(strc)); //google //() 分组 var strc = "www.google"; //baidu google luffycity var regc = /(baidu)|(google)|(luffycity)/g; console.log(regc.exec(strc)); console.log(RegExp.$1); console.log(RegExp.$2); console.log(RegExp.$3); var str = "helloworld"; var reg = /(hello)(world)/g; /* console.log(reg.exec(str)); console.log(RegExp.$1);*/ //hello //将分组好的匹配 调换顺序 console.log(str.replace(reg,"$2 $1")); } </script> </head> <body> </body> </html>
正则表达式的练习题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript"> window.onload = function () { //1.检测字符串中是否不包含字母 var str = '12'; var reg1 = /[^a-zA-Z]/g; if (reg1.test(str)){ console.log('不包含'); }else { console.log('包含') } //2.去除字符串首尾空格;可以用trim方法或者写个表达式 var str2 = " hello world! "; //开头的空格 var reg = /^\s+/ig; //? * + ；\s+表多个空格；ig是全局匹配 var str3 = str2.replace(reg, ""); //转换了下 var reg2 = /\s+$/ig; //后边的空格 var str4 = str3.replace(reg2, ""); console.log("|" + str4 + "|"); var oBtn = document.getElementById("btn"); //3检查用户账号 function checkUser(str) { var re = /^[a-zA-z]\w{3,15}$/; if (re.test(str)){ console.log("用户账号正确"); } else{ console.log("用户账号错误"); } } checkUser("alex_hah");//调用 // 4手机号码 //验证规则:11位数字，以1开头。 function checkMobile(str) { var re = /^1\d{10}$/ if (re.test(str)){ console.log("手机号码正确"); } else { console.log("手机号码错误"); } } checkMobile('18271182769'); //调用 checkMobile('182711182790'); //错误示例 //5电话号码 //验证规则：区号+号码，区号以0开头，3位或4位 // 号码由7位或者8位数字组成 // 区号与号码之间可以无连接符，也可以"-"连接 function checkPhone(str) { var re = /^0\d{2,3}-?\d{7,8}$/; if (re.test(str)){ console.log("电话号码正确"); }else { console.log("电话号码错误"); } } checkPhone("095-57777777"); //调用 //6.邮箱 //验证规则:姑且把邮箱地址分成“第一部分@第二部分”这样 //第一部分由：字母、数字、下划线、短线“-”、点号“.”组成， //第二部分：为一个域名，域名由字母、数字、短线“-”、域名后缀组成， //而域名后缀一般为.xxx或.xxx.xx，一区的域名后缀一般为2-4位，如cn，com function checkEmail(str) { var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/ if (re.test(str)){ console.log("邮箱正确"); } else { console.log("邮箱错误"); } } checkEmail("alex@cnblogs.cn"); //调用 } </script> </body> </html>
