JavaScript中的RegExp和Cookie

在这里插入图片描述

个人主页：学习前端的小z

个人专栏：JavaScript 精粹

本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！

文章目录

🔆RegExp
- 🎲 1 什么是正则表达式
- 🎲2 创建正则表达式
- - 💟 2.1 直接量
  - 💟 2.2 new RegExp
- 🎲3 正则表达式用法及区别
- - 💟 3.1 String中正则表达式方法
  - 💟 3.2 RegExp对象的方法
- 🎲4 修饰符
- 🎲5 pattern 模式
- - 💟5.1 基本匹配
  - 💟5.2 []
  - 💟5.3 元字符(`转义字符`)
  - 💟5.4 量词
  - 💟5.5 贪婪惰性
  - 💟5.6 子组(子表达式)
- 🎲6 常用正则
🔆Cookie
- 🎲1 访问cookie
- 🎲2 存储cookie
- 🎲3 设置cookie过期时间
- 🎲4 cookie封装

在这里插入图片描述

🔆RegExp

🎲 1 什么是正则表达式

正则表达式是描述字符模式的对象。

正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。
而String和RegExp都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。
正则表达式主要用来验证客户端的输入数据。可以节约大量的服务器端的系统资源，并且提供更好的用户体验。

🎲2 创建正则表达式

💟 2.1 直接量

语法：Reg = /pattern/modifiers;

var Reg = /box/gi;

💟 2.2 new RegExp

语法 Reg = new RegExp( pattern , modifiers );
pattern ，modifiers此时是字符串

var Reg = new RegExp(“box”,”gi”);

何种方法创建都是一样的
pattern 模式模板，要匹配的内容
modifiers 修饰符

🎲3 正则表达式用法及区别

💟 3.1 String中正则表达式方法

方法	描述
`match(`Reg`)`	返回RegExp匹配的包含全部`字符串`的数组或`null`
`search(`Reg`)`	返回RegExp匹配字符串首次出现的`位置`
`replace(`Reg，newStr`)`	用`newStr`替换RegExp匹配结果，并返回新字符串
`split(`Reg`)`	返回字符串按指定RegExp拆分的数组

使用

var str = 'hello';
var Reg = /e/i;
str.match(Reg);

💟 3.2 RegExp对象的方法

方法

方法	描述
`exec（）`	在字符串中执行匹配搜索，返回首次匹配结果`数组`,
`test（）`	在字符串中测试模式匹配，返回`true`或`false`

使用

    var pattern = new RegExp(“box”,”gi”);pattern.test(str);pattern.exec(str);

注意区别正则方法和字符串方法使用避免混淆

正则方法：pattern.test(str); 方法的主体是正则表达式
字符串方法：str.match(pattern);方法的主体是字符串

🎲4 修饰符

修饰符用于执行区分大小写和全局匹配:

i 忽略大小写匹配
g 全局匹配，默认只匹配第一个元素，就不在进行匹配
m 执行多行匹配

    var patt =  /pattern/i;         //忽略大小写匹配var patt =  /pattern/g;         //全局匹配var patt =  /pattern/m;         //执行多行匹配

🎲5 pattern 模式

💟5.1 基本匹配

xxx ———————————匹配xxx字符

var Reg = /abc/;

x|y|z —————————-匹配x或y或z字符

var Reg = /abc|bac|cba/;

💟5.2 []

[abc]———————————–匹配abc之中的任何一个字符
非
[^abc]———————————匹配非a非b非c字符的
到

[0-9]` ———————————匹配`0至9`之间的数字
`[a-z]` ———————————匹配`小写a至小写z`的字符
`[A-Z]` ———————————匹配`大写A至大写Z`的字符
匹配中文 `[\u4e00-\u9fa5]

还可以组合

 var Reg  = /hello [0-9a-zA-z]/;

💟5.3 元字符(`转义字符`)

.` —————————————–匹配`单个字符`，除了换行和行结束符
`\w`—————————————匹配`单词字符`,`数字`,`_`(下划线)
`\W`—————————————匹配`非`（`单词字符`和`_`(下划线)）
`\d` —————————————匹配`数字`
`\D` —————————————匹配`非数字`
`\s` —————————————匹配空白字符（`空格`）
`\S` —————————————匹配`非空格`字符
`\b` —————————————匹配`单词边界` ( 除了 （字)字母 数字_ 都算单词边界)
`\B` —————————————匹配`非单词边界`
`\n` —————————————匹配`换行符

特殊的转译字符. \ /

var reg = /\./;//匹配.
var reg = /\\/;//匹配\
var reg = /\//;//匹配/

💟5.4 量词

n?———————————匹配0个或一个n的字符串
n*———————————匹配0个或多个字符串(任意个)
n+———————————匹配至少一个n字符串
n{X}——————————匹配包含X个n的序列的字符串
n{X,Y}————————–匹配包含至少X或至多Y个n的序列的字符串
n{x,}—————————-匹配至少X个n的序列字符串

^n———————————匹配以n开头的字符串
n$———————————匹配以n结尾的字符串

💟5.5 贪婪惰性

贪婪: 尽可能多的匹配
惰性: 尽可能少的匹配
前提条件都是要匹配到内容

—— 贪婪 ——	—— 惰性 ——
`+`	+`?`
`?`	?`?`
`*`	*`?`
{`n`}	{n}`?`
{`n`,`m`}	{n,m}`?`
{`n,`}	{n,}`?`

💟5.6 子组(子表达式)

子组:使用()小括号,指定一个子表达式后,称之为分组

捕获型
非捕获型

捕获型

var str = 'abcdefg';
var reg = /(abc)d/;//匹配abcd
var val = reg.exec( str);
console.log( val );   //["abcd", "abc", index: 0, input: "abcdefg"]

索引0 为匹配的结果
索引1 为第一个子表达式匹配结果
index :首次匹配成功的索引值，
input: 匹配目标

—— 字符 ——		引用
`(pattern)`	匹配pattern并`捕获结果`，`自动设置组号`,是从1开始的正整数	`\num`

引用是值的引用，匹配结果的引用不是匹配形式引用

非捕获型

(？:pattern)
(?=pattern) 零宽度正向预言

Windows (?=2000) //匹配windows且后面跟2000

匹配 “Windows2000” 中的 “Windows”
不匹配 “Windows3.1” 中的 “Windows”。

(?!pattern) 零宽度负向预言

 Windows (?!2000)//匹配windows且后面非2000

匹配 “Windows3.1” 中的 “Windows”
不匹配 “Windows2000” 中的 “Windows”。

🎲6 常用正则

火车车次

/^[GCDZTSPKXLY1-9]\d{1,4}$/

手机机身码(IMEI)

/^\d{15,17}$/

必须带端口号的网址(或ip)

/^((ht|f)tps?:\/\/)?[\w-]+(\.[\w-]+)+:\d{1,5}\/?$/

网址(url,支持端口和"?+参数"和"#+参数)

/^(((ht|f)tps?):\/\/)?[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?$/

统一社会信用代码

/^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/

迅雷链接

/^thunderx?:\/\/[a-zA-Z\d]+=$/

ed2k链接(宽松匹配)

/^ed2k:\/\/\|file\|.+\|\/$/

磁力链接(宽松匹配)

/^magnet:\?xt=urn:btih:[0-9a-fA-F]{40,}.*$/

子网掩码

/^(?:\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(?:\.(?:\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/

linux"隐藏文件"路径

/^\/(?:[^/]+\/)*\.[^/]*/

linux文件夹路径

/^\/(?:[^/]+\/)*$/

linux文件路径

/^\/(?:[^/]+\/)*[^/]+$/

window"文件夹"路径

/^[a-zA-Z]:\\(?:\w+\\?)*$/

window下"文件"路径

/^[a-zA-Z]:\\(?:\w+\\)*\w+\.\w+$/

股票代码(A股)

/^(s[hz]|S[HZ])(000[\d]{3}|002[\d]{3}|300[\d]{3}|600[\d]{3}|60[\d]{4})$/

大于等于0, 小于等于150, 支持小数位出现5, 如145.5, 用于判断考卷分数

/^150$|^(?:\d|[1-9]\d|1[0-4]\d)(?:.5)?$/

html注释

/^<!--[\s\S]*?-->$/

md5格式(32位)

/^([a-f\d]{32}|[A-F\d]{32})$/

版本号(version)格式必须为X.Y.Z

/^\d+(?:\.\d+){2}$/

视频(video)链接地址（视频格式可按需增删）

/^https?:\/\/(.+\/)+.+(\.(swf|avi|flv|mpg|rm|mov|wav|asf|3gp|mkv|rmvb|mp4))$/i

图片(image)链接地址（图片格式可按需增删）

/^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i

24小时制时间（HH:mm:ss）

/^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/

12小时制时间（hh:mm:ss）

/^(?:1[0-2]|0?[1-9]):[0-5]\d:[0-5]\d$/

base64格式

/^\s*data:(?:[a-z]+\/[a-z0-9-+.]+(?:;[a-z-]+=[a-z0-9-]+)?)?(?:;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*?)\s*$/i

数字/货币金额（支持负数、千分位分隔符）

/^-?\d+(,\d{3})*(\.\d{1,2})?$/

数字/货币金额 (只支持正数、不支持校验千分位分隔符)

/(?:^[1-9]([0-9]+)?(?:\.[0-9]{1,2})?$)|(?:^(?:0){1}$)|(?:^[0-9]\.[0-9](?:[0-9])?$)/

银行卡号（10到30位, 覆盖对公/私账户, 参考微信支付）

/^[1-9]\d{9,29}$/

中文姓名

/^(?:[\u4e00-\u9fa5·]{2,16})$/

英文姓名

/(^[a-zA-Z]{1}[a-zA-Z\s]{0,20}[a-zA-Z]{1}$)/

车牌号(新能源)

/[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}(([0-9]{5}[DF])|([DF][A-HJ-NP-Z0-9][0-9]{4}))$/

车牌号(非新能源)

/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/

车牌号(新能源+非新能源)

/^(?:[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}(?:(?:[0-9]{5}[DF])|(?:[DF](?:[A-HJ-NP-Z0-9])[0-9]{4})))|(?:[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9 挂学警港澳]{1})$/

手机号(mobile phone)中国(严谨), 根据工信部2019年最新公布的手机号段

/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/

手机号(mobile phone)中国(宽松), 只要是13,14,15,16,17,18,19开头即可

/^(?:(?:\+|00)86)?1[3-9]\d{9}$/

手机号(mobile phone)中国(最宽松), 只要是1开头即可, 如果你的手机号是用来接收短信, 优先建议选择这一条

/^(?:(?:\+|00)86)?1\d{10}$/

date(日期)

/^\d{4}(-)(1[0-2]|0?\d)\1([0-2]\d|\d|30|31)$/

email(邮箱)

/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

座机(tel phone)电话(国内),如: 0341-86091234

/^\d{3}-\d{8}$|^\d{4}-\d{7,8}$/

身份证号(1代,15位数字)

/^[1-9]\d{7}(?:0\d|10|11|12)(?:0[1-9]|[1-2][\d]|30|31)\d{3}$/

身份证号(2代,18位数字),最后一位是校验位,可能为数字或字符X

/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/

身份证号, 支持1/2代(15位/18位数字)

/(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0[1-9]|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/

护照（包含香港、澳门）

/(^[EeKkGgDdSsPpHh]\d{8}$)|(^(([Ee][a-fA-F])|([DdSsPp][Ee])|([Kk][Jj])|([Mm][Aa])|(1[45]))\d{7}$)/

帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线组合

/^[a-zA-Z]\w{4,15}$/

中文/汉字

/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/

小数

/^\d+\.\d+$/

数字

/^\d{1,}$/

html标签(宽松匹配)

/<(\w+)[^>]*>(.*?<\/\1>)?/

qq号格式正确

/^[1-9][0-9]{4,10}$/

数字和字母组成

/^[A-Za-z0-9]+$/

英文字母

/^[a-zA-Z]+$/

小写英文字母组成

/^[a-z]+$/

大写英文字母

/^[A-Z]+$/

密码强度校验，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符

/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/

用户名校验，4到16位（字母，数字，下划线，减号）

/^[a-zA-Z0-9_-]{4,16}$/

ip-v4

/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/

ip-v6

/^((([0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}:[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){5}:([0-9A-Fa-f]{1,4}:)?[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){4}:([0-9A-Fa-f]{1,4}:){0,2}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){3}:([0-9A-Fa-f]{1,4}:){0,3}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){2}:([0-9A-Fa-f]{1,4}:){0,4}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(([0-9A-Fa-f]{1,4}:){0,5}:((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(::([0-9A-Fa-f]{1,4}:){0,5}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|([0-9A-Fa-f]{1,4}::([0-9A-Fa-f]{1,4}:){0,5}[0-9A-Fa-f]{1,4})|(::([0-9A-Fa-f]{1,4}:){0,6}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){1,7}:))$/i

16进制颜色

/^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/

微信号(wx)，6至20位，以字母开头，字母，数字，减号，下划线

/^[a-zA-Z][-_a-zA-Z0-9]{5,19}$/

邮政编码(中国)

/^(0[1-7]|1[0-356]|2[0-7]|3[0-6]|4[0-7]|5[1-7]|6[1-7]|7[0-5]|8[013-6])\d{4}$/

中文和数字

/^((?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])|(\d))+$/

不能包含字母

/^[^A-Za-z]*$/

java包名

/^([a-zA-Z_][a-zA-Z0-9_]*)+([.][a-zA-Z_][a-zA-Z0-9_]*)+$/

mac地址

/^((([a-f0-9]{2}:){5})|(([a-f0-9]{2}-){5}))[a-f0-9]{2}$/i

匹配连续重复的字符

/(.)\1+/

在这里插入图片描述

🔆Cookie

cookie : 存储数据，当用户访问了某个网站（网页）的时候，我们就可以通过cookie来向访问者电脑上存储数据

1.不同的浏览器存放的cookie位置不一样，也是不能通用的
2.cookie的存储是以域名形式进行区分的
3.cookie的数据可以设置名字的
4.一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样
5.每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样

🎲1 访问cookie

要在服务器环境下

我们通过document.cookie来获取当前网站下的cookie的时候，得到的字符串形式的值，他包含了当前网站下所有的cookie。他会把所有的cookie通过一个分号+空格的形式串联起来

consol.log( document.cookie );

🎲2 存储cookie

document.cookie = '数据名=值';

🎲3 设置cookie过期时间

cookie默认是临时存储的，当浏览器关闭进程的时候自动销毁 ,如果我们想长时间存放一个cookie。需要在设置这个cookie的时候同时给他设置一个过期的时间

过期时间必须是一个日期对象转换成的字符串（时间戳.toGMTString()）

document.cookie = ‘数据名=值; expires=过期时间’;

var oDate = new Date();
oDate.setDate( oDate.getDate() + 5);oDate.toGMTString();//转换为日期字符串
document.cookie='age=20; expires='+oDate;/*-- document.cookie='sex=man\n你好'; */
//转码
var content= encodeURI('man\n你好');
document.cookie='sex='+content+';expires='+oDate;

要找到对应的数据值，可以使用多种方式

🎲4 cookie封装

设置cookie封装

function setCookie(obj,time){for(key in obj){var d = new Date();d.setDate( d.getDate()+time );document.cookie = key+'='+obj[key]+'; expires='+d.toUTCString();}
}setCookie({name:'hello',sex:'man',love:'逛街',work:'future'
},5);

获取cookie封装

 function getCookie() {var cookie = document.cookie;var cookieArr = cookie.match(/[^=;\s]+=([^=;]+)(?:;?)/g);var argData = {}for (var key of arguments) {argData[key] = 1;}return cookieArr.reduce(function (acc, curr) {var tempStr = curr.replace(';', '');var tempArr = tempStr.split('=');if (tempArr[0] && argData[tempArr[0]]) {acc[tempArr[0]] = tempArr[1]}return acc;}, {});
getCookie('name','age')

移除cookie

function removeCookie(){for(key in arguments){var json ={};json[arguments[key]]=null;setCookie(json,-1);}}removeCookie('name');

在这里插入图片描述

参考 : http://bclary.com/log/2004/11/07/#a-11.9.3

在这里插入图片描述