js(Reg正则)常用

317 阅读3分钟

什么是正则?

在编写前端表单的时候遇到一些像手机号码、电话、电子邮箱、身份证号码这类需要一定的格式校验的字段时,通常我们需要自定义一些规则,这时候就需要用到正则表达式了
1 在JS中提供了一个类: RegExp 正则类
2 不是基本类型 和Date一样 具有实用api的特殊对象 语法复杂 一种很强大和常用的文本处理工具
3 在两条线之间构成了正则表达式直接量 第二条线之后也可以跟随 一个或多个字母 用来修饰匹配模式含义

正则的创建: 构造函数创建

 new RegExp(字符规则, 权限修饰符);
                     //权限修饰符: i忽略大小写  g全局匹配  m多行匹配(常应用在文本域的编辑以及回显上面)
 var r1 = new RegExp('hello[/d]{2,4}world',);
 var r1 = new RegExp('规则', '修饰符');
 var r2 = /规则/修饰符;

理解正则要干的事 三个灵魂拷问?

1.匹配啥? 2.匹配不是啥 3.匹配多少次

匹配啥 ?

 //比如想匹配字符a 那就直接写/a/ 只要字符串某个位置是a 就可以匹配上
    var a = /a/
    console.log(a.test("javascript"))
    console.log(/a/.test("javascript"))

    //匹配a开头的字符串 就加上元字符^ (开始标识) /^a/;
    console.log(/^a/.test("javascrittt"))   //不是以a开头返回false
    console.log(/^a/.test("abc"))           //以a开头 返回true 

    //匹配以啊结尾的字符串 加上元字符$ (结束位置标识) /a$/
    console.log(/a$/.test("javascript"))    //不是以a结束的 返回false
    console.log(/a$/.test("cba"))           //是以啊 返回true 

    //匹配字符a或b 可以把对应的字符放入中括号里/[a|b]/  只要字符串包含a或者b就可以匹配上
    console.log(/[a|b]/.test("byte"))       //true
    
   // 例子 
   // \ 即转移 
   var msg = "[大,兄弟儿]";                  // 匹配[ 或者 ] 替换为空     
   var handleMsg =  measure.replace(/[\[|\]]/igm,'')
   console.log(handleMsg);                  // 大,兄弟儿  
 
    // 匹配字符串abc或xyz /abc|xyz/
    console.log(/abc|xyz/.test("xyzasdas"))    //本字符串包含xyz 所以返回true
    var measure = "内蒙古自治区,广西壮族自治区,宁夏回族自治区"
    var handleMsg =  measure.replace(/自治区|壮族|回族/igm,'') //return  内蒙古,广西,宁夏
匹配啥前面的(前瞻)?
//匹配啥前面的 (前瞻)
//exp1(?=exp2) 匹配exp2前面的exp1 匹配结果不包含exp2   
//比如匹配字符串script前面的部分java  /java(?=script)/ 
console.log(/java(?=script)/.test("javascript,javaee,typescript")) //字符串中javascript符合规则 返回true   
//1 用exec方法来验证匹配的结果 
console.log(/java(?=script)/.exec("javascript,javaee,typescript")) //["java", index: 0, input: "javascript,javaee,typescript", groups: undefined]
匹配啥后面的(后顾)?
//(?<=exp2)exp1 匹配exp2后面的exp1 匹配结果不包含exp2  
//要匹配字符串中前面不是java的script  /java(?<=22)/
console.log(/(?<=java)ee/.test("javaee"))       //字符串中javaee 符合规则 会返回ture 
截取 字符串特定字符前后或后面的数据
    1*截取字符串a和f之间的数据 /a(\S*)f/
    2*获取指定字符串之后 (?<=指定字符串)
    3*获取指定字符串之前 (?=指定字符串)

匹配不是啥?

/*匹配不是啥 意思是取反 只要不是这些都可以匹配 比如不想匹配字符a  /[^a]/  */
    console.log(/[^a]/.test("aaaaaa"))      //字符串全是a   false 
    console.log(/[^a]/.test("aaaaaa"))      //字符不是a 返回true
    
    //匹配不是以a 开头的跟之前匹配啥类型 加上元字符 ^ /^[^a]/
    console.log(/^[^a]/.test("javascript"))     

案例瞅一下

 //.match() 方法可在字符串内检索指定的值 或找到一个或多个正则表达式的匹配 
    var str = "http://zhipur.com/item?data=SN34567892143423423";
    var code1 = str.match(/\?data=(.*)/)[1]    //取?data=后面所有字符串  
    var code2 = str.match(/data=(.*)/)[1]      //取data=后面所有的字符串
    var code3 = str.match(/data=(.*)/)[0]      //取包含data= 以及后面的字符串  
    var code4 = str.match(/(\S*)?data=/)[1]
    var code5 = str.match(/(\S*)?data=/)[0]
    console.log(code1)                         //SN34567892143423423 
    console.log(code2)                         //SN34567892143423423 
    console.log(code3)                         //data=SN34567892143423423   
    console.log(code4)                         //http://zhipur.com/item? 
    console.log(code5)                         //http://zhipur.com/item?data= 

一个函数

### 从url获取参数并转为对象

网页路径经常是:`www.baidu.com?search=js&xxx=kkk`这种形式的,
我们是经常需要取参数的,可以使用第三方的`qs`包实现,如果你只是要实现去参数,
这一句代码就可以实现,不用再引入`qs`了。 
const getParameters = URL => JSON.parse(`{"${decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"')}"}` ) 
getParameters("https://www.google.com.hk/search?q=js+md&newwindow=1"); // {q: 'js+md', newwindow: '1'}

面试题

例子 (操作url链接) 普通url的各种组成部分
1 协议部分 url的协议部分 使用的HTTP协议 在internet中 可使用 多种协议 http ftp等 http后面的// 是分隔符
2 域名部分 url的域名部分 是www.aspxfans.com 一个url种 也可以使用 ip地址作域名使用
3 端口部分 跟在域名后面的就是端口 域名和端口之间使用 : 作为分隔符 端口不是一个url的必须部分 如果省略端口 将默认使用80端口
4 虚拟目录部分 从域名后的第一个/ 开始到最后一个/ 为止是虚拟目录部分 虚拟目录也不是一个url必须的部分 例子的虚拟目录 /news/
5 文件名部分 从域名后的最后一个/ 开始到?为止 是文件名部分
如果没有? 则是从域名后最后一个/ 开始到# 为止
如果没有? 和 #那么从域名后的最后一个/开始到结束
例子中的是 index.asp 文件名也不是一个url必须部分 如果省略 则使用默认的文件名
6 锚部分 从#开始到最后 都是锚部分 例子中锚是name 锚部分 也不是一个url 必须部分
7 参数部分 从?开始到# 之间的部分为参数 又称搜索部分 查询部分 例子中参数 boadrdID=5&ID=2461&page=1 参数可以又多个参数 参数与参数之间用 & 作为分隔符