什么是正则?
在编写前端表单的时候遇到一些像手机号码、电话、电子邮箱、身份证号码这类需要一定的格式校验的字段时,通常我们需要自定义一些规则,这时候就需要用到正则表达式了
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 参数可以又多个参数 参数与参数之间用 & 作为分隔符