JS正则表达式

JS正则表达式

(1)正则表达式的作用

给定字符串是否符合正则表达式的过滤逻辑(匹配)

我们可以通过正则表达式从字符串中得到我们想要(提取)的特定部分。

强字符串替换能力(替换)

(1)正则表达式的特征

非常灵活，逻辑和功能。

字符串的复杂控制可以通过非常简单的方式快速实现。

对于刚接触的人来说，就比较隐晦了。

常规成分

(1)、特殊字符

普通数字、字母、中文、符号、特殊字符.

公共元字符

元字符

解释

\d

至少匹配一个数字

\D

至少匹配任何非数字字符。

\w

至少匹配一个字母、数字或下划线

\W

至少有一个匹配项不是字母、数字或下划线。

\s

至少匹配任何空格。

\S

至少匹配一个非空白字符。

至少匹配一个非换行符。

^

指示匹配行开头的文本(以谁开头)\ d

$

指示匹配行结束的文本(谁结束)\d$

预选赛

预选赛

解释

*

重复零次或多次\ d */ab * $/:表示一个字符串有一个A后跟零或几个b(' A '，' ab '，' abbb '，……)；

重复一次或多次\d /ab/

重复/ab $/零次或一次：表示字符串有一个a后跟零或b；

{n}

确保重复n次。

{n，}

重复n次或更多

{n，m}

重复n到m次

其他字符：

[]字符串用括号括起来，这意味着匹配任何字符，这相当于或[0-9]的含义

[]匹配除括号之外的任何内容。

\ 转义符：\的用法\主要是用法是在正则表达式中的特殊符号转换为它本身的意思

| 或者，选择两者中的一个。注意|将左右两边分为两部分，而不管左右两边有多长多乱

() 从两个直接量中选择一个，分组

eg：gr(a|e)y匹配gray和grey

[\u4e00-\u9fa5] 匹配汉字

创建正则对象

（1）字面量创建

varreg1=/\d/;

（2）构造函数创建

varregObj1=newRegExp(/\w/);

正则匹配

RegExp.prototype.test()

语法：regexObj.test(str)

参数：str 用来与正则表达式匹配的字符串

返回值：如果正则表达式与指定的字符串匹配 ，返回true；否则false。

正则提取

String.prototype.match()

语法：str.match(regexp)

参数：regexp

正则替换

String.prototype.replace()

replace()方法返回一个由替换值（replacement）替换一些或所有匹配的模式（pattern）后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。

原字符串不会改变。

语法：str.replace(regexp|substr, newSubStr|function)

参数：regexp(pattern)

一个RegExp对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉。

substr(pattern)

一个将被newSubStr替换的字符串。其被视为一整个字符串，而不是一个正则表达式。仅第一个匹配项会被替换。

缓存

localStorage：不手动删除，否则数据永远不会消失

sessionStorage：网页关闭数据清空

cookie：数据会存储一段时间，一段时间后会消失，它可以让客户端和服务器端口有连接

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);

函数防抖和节流

准备材料

div id="content"style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"/div

script

letnum = 1;

letcontent = document.getElementById('content');

functioncount() {

content.innerHTML = num++;

};

content.onmousemove = count;

/script

这段代码， 在灰色区域内鼠标随便移动，就会持续触发 count() 函数，导致的效果如下：

防抖：

　短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行。

　　我们是这样使用的：

非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

// 立即执行版

functiondebounce(func, wait) {

lettimer;

returnfunction() {

letcontext =this;// 这边的 this 指向谁

letargs = arguments;// arguments中存着e

if(timer) clearTimeout(timer);

letcallNow = !timer;

timer = setTimeout(() = {

timer =null;

}, wait)

if(callNow) func.apply(context, args);

}

}

立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。

节流：

指连续触发事件但是在 n 秒中只执行一次函数。即 2n 秒内执行 2 次... 。节流如字面意思，会稀释函数的执行频率。

　同样有两个版本，时间戳和定时器版。

　　使用方式如下：

在持续触发事件的过程中，函数会立即执行，并且每 1s 执行一次。

// 定时器版

functionthrottle(func, wait) {

lettimeout;

returnfunction() {

letcontext =this;

letargs = arguments;

if(!timeout) {

timeout = setTimeout(() = {

timeout =null;

func.apply(context, args)

}, wait)

}

}

}

可以看到，在持续触发事件的过程中，函数不会立即执行，并且每 1s 执行一次，在停止触发事件后，函数还会再执行一次。

关于节流/防抖函数中 context（this） 的指向解析：

首先，在执行throttle(count, 1000)这行代码的时候，会有一个返回值，这个返回值是一个新的匿名函数，因此content.onmousemove = throttle(count,1000);这句话最终可以这样理解：

　　到这边为止，只是绑定了事件函数，还没有真正执行，而 this 的具体指向需要到真正运行时才能够确定下来。所以这个时候如果我们把前面的content.onmousemove 替换成 varfn 并执行 fn fn() ，此时内部的 this 打印出来就会是 window 对象。

　　其次，当我们触发 onmousemove 事件的时候，才真正执行了上述的匿名函数，即 content.onmousemove() 。此时，上述的匿名函数的执行是通过 对象.函数名() 来完成的，那么函数内部的 this 自然指向 对象。

　　最后，匿名函数内部的 func 的调用方式如果是最普通的直接执行 func() ，那么 func 内部的 this 必然指向 window ，虽然在代码简单的情况下看不出什么异常（结果表现和正常一样），但是这将会是一个隐藏 bug，不得不注意啊！所以，我们通过匿名函数捕获 this，然后通过 func.apply() 的方式，来达到content.onmousemove = func这样的效果。

　　可以说，高阶函数内部都要注意 this 的绑定。