Web前端Javascript笔记（6）正则表达式

在web前端中，假设用户需要提交表单，在表单提交到服务器进一步处理之前，Javascript程序会检查表单，以确认用户输入的信息是符合规范要求的。这些工作可以使用正则表达式完成，正则表达式是一个描述字符模式的对象，ECMAscript的RegExp类表示正则表达式。在正则表达式中，定义了功能强大的【模式匹配】，【文本检索】，【替换】函数。

正则表达式创建： ig忽略大小写和全局匹配，全局匹配表示是匹配/替换所有的满足条件的，否则只返回第一个

<script>let box0 = new RegExp("box", "ig");  // 匹配字符串(主体)，匹配模式(修饰符)let box1 = RegExp("box", "ig");  // 匹配字符串(主体)，匹配模式(修饰符)let box2 = /box/ig;
</script>

正则表达式对象的属性和方法：

1. test

格式是：正则.test(string): 在字符串中匹配正则是否存在，返回布尔值

2.exec

格式是：正则.exec(string): 在字符串中匹配正则是否存在，返回数组，数组中存储的是匹配到的字符，匹配失败返回的是null

3. 在字符串中的很多方法都可以使用正则表达式：参数是正则表达式

match() ，在字符串中匹配是否有合法的正则，返回值：数组和null

replace()，字符串.replace(oldstr/ RegExp, newstr), 用新的字符串匹配就的字符串，旧的字符串可以用正则表示

返回值：替换成功的新字符串

split() ，字符串分割，分隔符可以是正则表达式，返回值是分割后的字符串

search()，字符串搜索，参数可以是正则表达式，返回值：>=0的下标，否则返回值为-1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>let box = RegExp("are");  // 匹配字符串(主体)，匹配模式(修饰符)let sen = "How are you";alert(box.test(sen));let box1 = RegExp("are", "i");    // 忽略大小写let sen1 = "How Are you";alert(box1.test(sen1));</script>
</head>
<body></body>
</html>

元字符：

在正则表达式中有特殊含义的字符

1. 单个数字和字符的元字符

"."表示可以匹配任何单个字符

[ ] 匹配单个范围内的字符 , 例如[a-z][A-Z][0-9], 匹配单个数字或者字母，[a-zA-Z0-9_],匹配单个数字，字母或者下划线

[^]与[ ]匹配的内容相反，例如 [^0-9]匹配处0-9之外的单个字符

\w 匹配数字，字母或者下划线，等价于[a-zA-Z0-9_]

\W 与\w正好相反

\d 表示匹配单个数字，等价于[0-9]

\D表示匹配非数字

2. 重复字符：（假设x代表任意的单个字符）

x? 表示匹配0或者1个字符x

x* 表示匹配任意多个字符x

x+ 表示匹配1或者多个字符x（至少一个）

x{m,n}匹配至少m个，最多n个字符

x{n} 表示必须匹配n个字符x

（xyz）+ 此时括号里面的内容xyz是当作单个字符去处理的

3. 空白字符

空白字符包括：

(null字符，空格字符，进纸字符，换行字符，回车字符，制表符等等)

\s 匹配任意单个的空白字符

\S 匹配任意单个的非空白字符

4. 锚字符

^ 行首匹配

$ 行尾匹配

例如： ^g.*d$ 匹配的字符串必须以g开头，以d结尾。

5. 替代字符

| 表示或运算字符

6. 修饰符

i 忽略大小写

g 全局匹配

m 换行匹配

7.转义字符：

\. 代表本来 . 字符的意思

\* 代表本来*字符的意思

正则表达式应用：

1. 匹配压缩文件

<script>let reg = /^\w+\.(zip|rar|gz)$/;let file_name = "shell.rar";alert(reg.test(file_name));
</script>

2. 匹配手机号

<script>let phone_reg = /^1[0-9]{10}/alert(phone_reg.test("18834659876"));
</script>

3. 验证身份证号：

<script>let id_reg = /^[1-9]\d{16}(\d|x)$/i;alert(id_reg.test("62172118850265478X"));
</script>

4. 验证中文字符串

<script>let chinese_reg = /^[\u4e00-\u9fa5]+$/;alert(chinese_reg.test("前端脚本"));
</script>

表单验证与密码强度：

1.验证用户名的合法性，包括用户名的长度，字母开头，只能包含数字，字母，下划线

2. 密码强度验证，包括密码的长度，强度等级划分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script rel="script" src="../JavaScript/tool.js"></script><script>window.onload = function () {let tag_userName = $("username");let tag_password = $("passwd");let tag_span = $("username-span");let tag_code = $("code");let tag_testCode = tag_code.getElementsByTagName("div");tag_userName.onblur = function () {let username = tag_userName.value;// 判断长度if(username.length < 6 || username.length >18){tag_span.innerHTML = "！用户名长度6~18";tag_span.style.color = "red";}//判断首字母开头else if(! /[a-zA-Z]/.test(username[0])){tag_span.innerHTML = "!用户名必须以字母开头";tag_span.style.color = "red";}else if (/\W/.test(username)){tag_span.innerHTML = "!用户名只能包含数字字母下划线";tag_span.style.color = "red";}else{tag_span.innerHTML = "!该用户名可注册";tag_span.style.color = "green";}};tag_password.onkeyup = function () {let password = tag_password.value;if(password.length >= 6){// 可以开始验证密码强度// 分类// 1. 弱密码： 纯数字 纯小写 纯大写// 2. 中密码： 两者混合// 3. 三种混合if (/^[0-9]+$/.test(password) || /^[a-z]+$/.test(password) ||/^[A-Z]+$/.test(password)){tag_testCode[0].style.background = "orange";tag_testCode[1].style.background = "gray";tag_testCode[2].style.background = "gray";}else if(/\d/.test(password) && /[a-z]/.test(password) && /[A-Z]/.test(password)){tag_testCode[0].style.background = "gray";tag_testCode[1].style.background = "gray";tag_testCode[2].style.background = "orange";}else{tag_testCode[0].style.background = "gray";tag_testCode[1].style.background = "orange";tag_testCode[2].style.background = "gray";}}}}</script><style>#form{width: 300px;height: 200px;margin: 20px auto;border: 1px solid black;background: #66c5b4;text-align: center;}#form #username{margin: 40px 5px 10px 5px;}#username-span{display: block;font-size: 10px;height: 16px;line-height: 16px;color: gray;}#passwd{margin: 10px 0 0 0;}#code{height: 30px;margin: 10px 60px 0 60px;}#code .testCode{width: 60px;height: 25px;line-height: 25px;background: gray;color: black;text-align: center;float: left;}</style>
</head>
<body>
<div id="form"><input id="username" type="text" placeholder="邮箱"><span id="username-span">字母，数字，下划线，长度6~18</span><input id="passwd" type="password" placeholder="密码"><!--密码轻度--><div id="code"><div class="testCode">若</div><div class="testCode">中</div><div class="testCode">强</div></div>
</div>
</body>
</html>

localStore本地存储：

在HTML5中，加入了一个localStorage特性，主要用来作为本地存储使用，解决了cookie存储空间不足的问题，cookie中每条cookie的存储空间为4k,localStorage中浏览器支持的是5M大小。

例如，首次登陆，点击记住用户名和密码，下次登陆就无需在输入用户名和密码

本地存储技术：

localStorage: 1. 永久存储 2.最大支持5M (客户端微型数据库) 3. 只能存储字符串
cookie: 1. 可以设置过期时间 2. 最大可以存储4k 3. 每一个域名下最多可以存储50条数据

sessionStorage : （结合后台使用）

--------------------------------------------------------------------------------------------------------------------

localStorage对象：

1. setItem(name, value)

2. getItem(name, value)

3. removeItem(name, value)

<script>if (!window.localStorage){alert("不支持localStore");}else{localStorage.setItem("name", "kitty");localStorage.setItem("age", "33");}window.onclick = function () {alert(localStorage.getItem("name"));localStorage.removeItem("age");}
</script>

localStorage应用：

在页面刷新后，依然能够保持页面的状态：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script rel="script" src="../JavaScript/tool.js"></script><script>window.onload = function () {let slide = $("slide");let full = $("full");let block = $("block");// 加载本地存储的位置信息if (!window.localStorage){alert("不支持localStorage");}else{let pos = localStorage.getItem("position");if (pos){block.style.left = pos + "px";full.style.width = pos + "px";}else{pos = 0;block.style.left = pos + "px";full.style.width = pos + "px";}}block.onmousedown = function (ev) {let e = ev || window.event;let offset_x = e.clientX - slide.offsetLeft;document.onmousemove = function (ev) {let e = ev || window.event;let current_x = e.clientX - slide.offsetLeft;if (current_x < 0){current_x = 0;}if(current_x > slide.offsetWidth - block.offsetWidth){current_x = slide.offsetWidth - block.offsetWidth;}block.style.left = current_x + "px";full.style.width = current_x + "px";// 对滑块的位置进行存储到本地if (window.localStorage) {localStorage.setItem("position", current_x.toString());}else {alert("不支持storage");}}};window.onmouseup = function () {document.onmousemove = null;};}</script><style>*{margin: 0;padding: 0;}#slide{position: relative;width: 600px;height: 30px;border: 1px solid black;margin: 100px auto;}#block{width: 30px;height: 30px;background-color: blue;position: absolute;left: 0;top: 0;}#full{width: 0;height: 30px;background-color: orange;position: absolute;top: 0;left: 0;}</style>
</head>
<body><div id="slide"><div id="full"></div><div id="block"></div></div>
</body>
</html>

在页面上拖动进度条之后，即使刷新页面，也会保持上次的进度条的位置。

强制改变this指向：

每一个函数中都有一个内置的变量this,this指向当前函数的主人，函数的主人需要根据上下文进行判断

强制数据类型转换：强制使得this指向统一的对象
1. call

例如，定义show(x, y)函数

格式：通过show.call()调用函数

参数：show.call(newObj, x, y） newObj表示新绑定的对象，后面的表示函数参数

<script>function show(x, y) {alert(this);    // this->windowalert(x + "," + y);}show(1,2);show.call("call", 1, 2);   // this->call
</script>

2.apply()方法

格式：show.apply()

参数： show.apply(newObj, [x, y]);

<script>function show(x, y) {alert(this);    // this->windowalert(x + "," + y);}show(1,2);show.apply("call", [1, 2]);   // this->call
</script>

3. bind()方法：预设this指向

格式：show.bind(newObj)

返回值：在执行show.bind(newObj)之后，show函数并不会被执行，而是会返回一个show()函数,但是此时的show()函数中this已经指向了newObj。

<script>function show(x, y) {alert(this);    // this->windowalert(x + "," + y);}show(1,2);let show1 = show.bind("call");show1(4,5);
</script>

apply使用技巧，在Math.min()和Math.max()中，查找数组的最大最小值，由于Math.min()和Math.max()只能传入一个一个的数，如果想找到数组中的最值，可以借助apply方法：

<script>alert(Math.max(1,2,3,4,5));alert(Math.max.apply("null", [1,2,3,4,5]));
</script>

let和const关键字:

let关键字：用于声明变量，变量作用域范围更小，只要遇到大括号，就形成作用域，例如，for循环，if判断，switch条件判断

var关键字：用于声明变量，且声明的变量是要遵循内存的垃圾回收机制，即将当前函数所在的大括号最为一个作用域进行处理。

所以将let关键字形成的作用域称为块作用域，将var关键字形成的作用域称为局部作用域。

例如：

<script>window.onload = function () {let btns = document.getElementsByTagName("button");for (var i=0; i<btns.length; i++){btns[i].onclick = function () {alert(i);}}    // 每个按钮都哦输出的是3，for循环下是整个作用域for (let i=0; i<btns.length; i++){btns[i].onclick = function () {alert(i);}}    // 因为每次循环，都会i都会产生一个独立的作用域，所以会生成三个独立的作用域// 所以输出的是0，1，2；}
</script>

const关键字：用于声明常量，变量的值只能在声明的时候确定，后续不能修改

箭头函数

一种新的函数的写法，只是写法上的一种改变，并没有实质上新的功能，也没有对程序的执行效率有所提高，且这样的代码可读性不好。由于不推荐，就不深入学习了。

<script>window.onload = function () {function add(x) {return x+10;}// 箭头函数的写法var add = x => x + 10;}
</script>

解构与ECMA6字符串：

解构:
1. 中括号解构

2. 大括号解构

<script>window.onload = function () {// 中括号解构let x, y, z = [1, 2, 3];alert(x + "," + y + "," + z);// 大括号解构let {name, age} = {name: "wang",age: "23"}}
</script>

解构的应用：

1. 可以很方便的交换两个变量的值

2. 使得函数可以返回多个值

3. 函数定义参数，传入参数的顺序

<script>window.onload = function () {// 1. 交换值[x, y] = [1, 2];[x, y] = [y, x];// 2. 返回值function test() {return [12, 45, 11];}[a, b, c] = test();// 3. 传参顺序function show({name, age=13, sex}) {alert("I am " + name + "," + age + "years old" + "," +sex);}show({     // 参数的顺序可以打乱, 参数还可以有默认值age: 13,sex: "female",name: "zhang"})}
</script>

Web前端Javascript笔记（6）正则表达式相关推荐

Web前端JavaScript笔记（4）节点
如何获取元素节点的属性: 在Web前端JavaScript笔记(3)对象中,介绍了访问行间属性的方法,除此之外,系统还提供了三个方法访问元素的属性: 1. setAttribute: 2. getAt ...
Web前端Javascript笔记（8）Ajax前后端交互
认识Ajax 全名Asynchronous Javascript and XML(异步JavaScript和XML),节省用户操作时间,提高用户体验,减少数据请求,传输获取数据.Ajax相当于前后台数 ...
Web前端Javascript笔记（5）事件
1. 什么是事件:事件是指发生并得到处理的操作 JavaScript中的事件是由访问web页面的用户引起的一系列操作,例如,用户的点击操作,JavaScript中有两种事件模型:内联模型,脚本模型. ...
Web前端 Javascript笔记（1）数组
结构 :html构建样式:css控制行为:JavaScript实现什么是JavaScript? JavaScript是一种跨平台的脚本语言,平台,即运行环境,一般指操作系统. --------- ...
Web前端JavaScript笔记（5）事件-拖拽
阻止默认行为和超链接在浏览器上运行网页后,右击会弹出菜单,这属于浏览器的默认行为.如何禁止这一默认行为: <script>window.onload = function () {doc ...
Web前端JavaScript笔记（3）对象
在JavaScript中没有类这个概念,只有对象,在新ECMA6新版中增加了类的概念,和数组,字符串类似,对象的声明方法也有三种: 1. 通过new运算符进行传件对象 2. 省略new运算符创建对象 ...
Web前端JavaScript笔记（2）字符串
字符串: 字符串的声明方式: 1. 通过new运算符声明字符串 // 声明的是对象 2. 省略new运算符 3. 字符串常量赋值 <script>var str1 = n ...
Web前端JavaScript笔记（7）ECMA6新增数组方法
新增数组方法: 1. Array.from(): 将伪数组转化为真数组 <script>window.onload = function () {let tag_li = documen ...
数字开头的正则表达式_初学Web前端要注意什么正则表达式是怎么回事
初学Web前端要注意什么?正则表达式是怎么回事?很多初学Web前端的同学对于正则表达式的印象就是难学,全是各种各样的特殊符号,完全没有规律可循,根本不知道怎么下手.不过真正了解正则表达式之后,你会发现 ...

Web前端Javascript笔记（6）正则表达式

Web前端Javascript笔记（6）正则表达式相关推荐

最新文章

热门文章