JS正则表达式

本文主要是介绍JS正则表达式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

(1) 正则表达式的作用

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

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

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

(1) 正则表达式的特点

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

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

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

正则的组成

(1)、特殊字符

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

常用元字符

限定符

其他字符：

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

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

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

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

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

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

[\u4e00-\u9fa5]  匹配汉字

创建正则对象

（1）字面量创建

  var reg1 = /\d/;

（2）构造函数创建

 var regObj1 = new RegExp(/\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>

    let num = 1;

    let content = document.getElementById('content');

    function count() {

        content.innerHTML = num++;

    };

    content.onmousemove = count;

</script>

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

防抖：

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

 　　我们是这样使用的：

非立即执行版的意思是触发事件后函数不会立即执行，而是在 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 秒内不触发事件才能继续执行函数的效果。

节流：

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

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

 　　使用方式如下：

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

// 定时器版

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 执行一次，在停止触发事件后，函数还会再执行一次。

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

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

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

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

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

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

这篇关于JS正则表达式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！