正则表达式

正则的组成

(1)、特殊字符

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

(2)、常用元字符

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

(3)、限定符

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

(4)、其他符号

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

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

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

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

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

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

[\u4e00-\u9fa5]  匹配汉字

创建正则对象

(1)、字面量创建

  var reg1 = /\d/;

(2)、构造函数创建

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

正则匹配

语法：regexObj.test(str)

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

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

 // 1、匹配由数字和26个英文字母组成的字符串

        var reg1 = /^[0-9a-zA-Z]{1,}$/

        console.log(reg1.test("1w,"));

        // 2、匹配由数字、26个英文字母或者下划线组成的字符串

        var reg2 = /^[0-9][a-zA-Z]|\w{1,}$/

        console.log(reg2.test("we2_"));

        // 3、匹配验证用户密码。 正确格式为：以字母开头，长度在6 - 18之间，只能包含字母、数字和下划线。

        // var reg3=/^[a-zA-Z]\w{6,18}$/

        var reg3 = /^[a-zA-Z][a-zA-Z0-9_]{5,18}$/

        console.log(reg3.test("_dad13"));

正则提取

语法：String.prototype.match()

参数

标志	说明
i	忽略大小写
g	全局匹配
gi           var reg=/wisj/gi	全局匹配+忽略大小写

 //    g全局匹配  i忽略大小写

        var str = 'w5,数字'

        var reg = /\D/gi

        console.log(str.match(reg));

正则替换

语法：String.prototype.replace()

HTML5的web存储

(1)、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 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

函数的防抖与节流

(1)、准备材料

1 2 3 4 5 6 7 8 9 10 11

<div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>   <script>     let num = 1;     let content = document.getElementById('content');       function count() {         content.innerHTML = num++;     };     content.onmousemove = count; </script>

(2)、函数防抖（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);

// 立即执行版

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);

    }

}

// 合成版

/**

   * @desc 函数防抖

   * @param func 目标函数

   * @param wait 延迟执行毫秒数

   * @param immediate true - 立即执行， false - 延迟执行

   */

function debounce(func, wait, immediate) {

    let timer;

    return function() {

      let context = this,

          args = arguments;

           

      if (timer) clearTimeout(timer);

      if (immediate) {

        let callNow = !timer;

        timer = setTimeout(() => {

          timer = null;

        }, wait);

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

      } else {

        timer  = setTimeout(() => {

          func.apply(context, args);

        }, wait)

      }

    }

}

(3)、节流(throttle)

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

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

// 时间戳版 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);

// 定时器版

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)

      }

    }

}

同样地，我们也可以将时间戳版和定时器版的节流函数结合起来，实现双剑合璧版的节流函数。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

/**  * @desc 函数节流  * @param func 函数  * @param wait 延迟执行毫秒数  * @param type 1 表时间戳版，2 表定时器版  */ function throttle(func, wait, type) {   if (type === 1) {     let previous = 0;   } else if (type === 2) {     let timeout;   }   return function() {     let context = this;     let args = arguments;     if (type === 1) {         let now = Date.now();           if (now - previous > wait) {           func.apply(context, args);           previous = now;         }     } else if (type === 2) {       if (!timeout) {         timeout = setTimeout(() => {           timeout = null;           func.apply(context, args)         }, wait)       }     }   } }