正则表达式

一，正则表达式

1.正则概念

正则表达式的定义

正则表达式：正则表达式最初是科学家对人类神经系统的工作原理的早期研究，现在在编程语言中有广泛的应用。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。

正则表达式的作用

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

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

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

正则表达式的特点

灵活性、逻辑性和功能性非常的强

可以迅速地用极简单的方式达到字符串的复杂控制

对于刚接触的人来说，比较晦涩难懂

2.正则的组成

特殊字符

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

常用元字符

元字符	说明
\d	匹配至少有一个数字
\D	匹配至少任意一个非数字的字符
\w	匹配至少一个字母或数字或下划线
\W	匹配至少有一个不是字母，数字，下划线
\s	匹配至少任意的空白符
\S	匹配至少一个不是空白符的字符
.	匹配至少有一个非换行符
^	表示匹配行首的文本(以谁开始) ^\d
$	表示匹配行尾的文本(以谁结束)\d$

限定符

限定符	说明
*	重复零次或更多次\d*  /^ab*$/：表示一个字符串有一个a后面跟着零个或若干个b。（"a", "ab", "abbb",……）；
+	重复一次或更多次\d+     / ab+/：表示一个字符串有一个a后面跟着至少一个b或者更多；
?	重复零次或一次    /^ab?$/：表示一个字符串有一个a后面跟着零个或者一个b；
{n}	至少重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次

其他符号

[] 字符串用中括号括起来，表示匹配其中的任一字符，相当于或的意思 [0-9]

[^]  匹配除中括号以内的内容

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

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

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

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

[\u4e00-\u9fa5]  匹配汉字

3.创建正则对象

1、字面量创建

  var reg1 = /\d/;

2、构造函数创建

 var regObj1 = new RegExp(/\w/);

4.正则匹配

RegExp.prototype.test()

语法：regexObj.test(str)

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

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

5.正则提取

String.prototype.match()

语法：str.match(regexp)

参数：regexp

一个对象。如果传入一个非正则表达式对象，则会隐式地使用 new RegExp(obj) 将其转换为一个  。如果你没有给出任何参数并直接使用match() 方法 ，你将会得到一 个包含空字符串的  ：[""] 。

返回值：

如果使用g标志，则将返回与完整正则表达式匹配的所有结果（Array），但不会返回捕获组，或者未匹配 null。

如果未使用g标志，则仅返回第一个完整匹配及其相关的捕获组（Array）。 在这种情况下，返回的项目将具有如下所述的其他属性，或者未匹配 null。

附加属性：

如上所述，匹配的结果包含如下所述的附加特性。

groups: 一个捕获组数组 或 （如果没有定义命名捕获组）。

index: 匹配的结果的开始位置

input: 搜索的字符串.一个，其内容取决于global（g）标志的存在与否，如果未找到匹配则为。

参数

标志	说明
i	忽略大小写
g	全局匹配
gi	全局匹配+忽略大小写

6.正则替换

String.prototype.replace()

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

原字符串不会改变。

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

参数：regexp (pattern)

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

substr (pattern)

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

newSubStr (replacement)

用于替换掉第一个参数在原字符串中的匹配部分的。该字符串中可以内插一些特殊的变量名。参考下面的。

function (replacement)

一个用来创建新子字符串的函数，该函数的返回值将替换掉第一个参数匹配到的结果。参考下面的。

返回值：

一个部分或全部匹配由替代模式所取代的新的字符串。

使用字符串作为参数

变量名	代表的值
$$	插入一个 "$"。
$&	插入匹配的子串。
$`	插入当前匹配的子串左边的内容。
$'	插入当前匹配的子串右边的内容。
$n	假如第一个参数是 对象，并且 n 是个小于100的非负整数，那么插入第 n 个括号匹配的字符串。提示：索引是从1开始

函数为参数

match	匹配的子串。（对应于上述的$&。）
p1,p2, ...	假如replace()方法的第一个参数是一个 对象，则代表第n个括号匹配的字符串。（对应于上述的$1，$2等。）例如，如果是用 /(\a+)(\b+)/ 这个来匹配，p1 就是匹配的 \a+，p2 就是匹配的 \b+。
offset	匹配到的子字符串在原字符串中的偏移量。（比如，如果原字符串是 'abcd'，匹配到的子字符串是 'bc'，那么这个参数将会是 1）
string	被匹配的原字符串。
NamedCaptureGroup	命名捕获组匹配的对象

二，HTML5的web存储

HTML5 web 存储,一个比cookie更好的本地存储方式。使用HTML5可以在本地存储用户的浏览数据。

1.localStorage 对象

cookie  会在客户端和服务端来回传输 数据量较小 几k

    localStorage   数据量大一些，几M   除非手动删除吗否则一直存在

    sessionStorage 数据量大一些，几M   只要关闭页面就不存在了

用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

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

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

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

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

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

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

下面的实例展示了用户点击按钮的次数。

if (localStorage.clickcount){
        localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else{
        localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";

2.sessionStorage 对象

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

三，函数的防抖（debounce)与节流（throttle)

函数防抖（debounce）

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14

// 非立即执行版 function debounce(func, wait) {     let timer;     return function() {       let context = this; // 注意 this 指向       let args = arguments; // arguments中存着e       if (timer) clearTimeout(timer);       timer = setTimeout(() => {         func.apply(this, args)       }, wait)     } }

使用

1	content.onmousemove = debounce(count,1000);

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

// 立即执行版 function debounce(func, wait) {     let timer;     return function() {       let context = this; // 这边的 this 指向谁?       let args = arguments; // arguments中存着e       if (timer) clearTimeout(timer);       let callNow = !timer;       timer = setTimeout(() => {         timer = null;       }, wait)       if (callNow) func.apply(context, args);     } }

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

节流(throttle)

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

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

// 时间戳版 function throttle(func, wait) {     let previous = 0;     return function() {       let now = Date.now();       let context = this;       let args = arguments;       if (now - previous > wait) {         func.apply(context, args);         previous = now;       }     } }

 　　使用方式如下：

1	content.onmousemove = throttle(count,1000);

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14

// 定时器版 function throttle(func, wait) {     let timeout;     return function() {       let context = this;       let args = arguments;       if (!timeout) {         timeout = setTimeout(() => {           timeout = null;           func.apply(context, args)         }, wait)       }     } }

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

　　我们应该可以很容易的发现，其实时间戳版和定时器版的节流函数的区别就是，时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。