JS高级：storage存储-正则表达式

独憩

已于 2022-11-03 17:58:31 修改

阅读量1.1k

点赞数

文章标签： javascript 开发语言

于 2022-11-03 17:33:23 首次发布

本文链接：https://blog.csdn.net/qq_54517101/article/details/127590281

版权

Storage

localStorage与sessionStorage基本用法与区别

localStorage与sessionStorage区别

Storage

localStorage与sessionStorage基本用法与区别

设置localStorage：

    localStorage.setItem('name','zhangsan')
    localStorage.setItem('age',17)

获取localStorage：

    let a =localStorage.getItem('name')
    let b =localStorage.getItem('age')
    console.log(a,b);

sessionStorage也类似

localStorage与sessionStorage区别

说一下验证二

  <a href="index.html">123</a>
  <script>

    localStorage.setItem('name','zhangsan')
    sessionStorage.setItem('age',17)


  </script>

这种跳转是页面内跳转，也就是把当前网页变成index.html，就会保留

验证三

如果跳转是打开新的页面，sessionStorage就不会保留

  <a href="index.html" target="_blank">123</a>
  <script>

    localStorage.setItem('name','zhangsan')
    sessionStorage.setItem('age',17)

其他常用方法

一般在使用存储时，都会新建一个js文件，定义一个类

class Cache{
    constructor(islocal = true){
        this.storage = islocal?localStorage:sessionStorage
    }
    setCache(key,value){
        if(!value){
            throw new error('value为空')
        }
        else{
            this.storage.setItem(key,JSON.stringify(value))
        }
        
    }

    getCache(key){
        let get = this.storage.getItem(key)
        if(get){
            return JSON.parse(get)
        }
        else{
            throw new error('no key')
        }

    }

    removeCache(key){
        this.storage.removeItem(key)
    }

    clear(){
        this.storage.clear()
    }
}

const localCache = new Cache()
const sessionCache = new Cache(false)

这里constructor先将参数赋值为true，用于选择this.storage的取值，也就是这里的存储到底是localStorage还是sessionStorage

定义了一些函数，这些函数的好处是，可以将value是对象的情况进行完整保存，因为如果直接用localStorage存储对象，就会出现

然后自己声明两个对象localCache和sessionCache，以供使用

    let obj = {
      name:111,
      age:15,
      level:777
    }

    localCache.setCache('obj',obj)

正则表达式

也就是说正则表达式由两部分组成，第一部分是字符串匹配的内容，第二部分是匹配的规则

举个例子，找到字符串中的abc（不区分大小写），替换为cba

    let ss = 'asdasdabc Abc ABc  ABC'
    let ss1 = ss.replaceAll(/abc/ig,'cba')
    console.log(ss1);

abc是匹配的内容，ig是规则，i是不区分大小写，g是全局匹配

例子2 删除所有数字

    let ss2 = 'asdas216846 asd8465ada asd 96489'
    let ss3 = ss2.replaceAll(/\d+/ig,'')
    console.log(ss3);

修饰符flag的使用

匹配内容

字符量

这里需要注意的是，写\d只会匹配一个数字，如果要匹配多个，写\d+，其他类似

锚点与词边界

给个词边界的例子，匹配时间，\b表示不能有\w表示的字符串

  <script>
    let ss = 'asdasdabc 12:22  alndkand 22:23 qweq 123:222'
    let ss1 = ss.match(/\b\d\d:\d\d\b/ig)
    console.log(ss1);

  </script>

转义字符

比如我想匹配一个 . 则必须写/.

集合与范围

举个例子，选取第第一个数字是1，第二个数字是3-9的数字

    let ss = [123,124,109,176,147,198,175]
    let ss1 = ss.filter(item => /^1[3-9]\d/ig.test(item))
    console.log(ss1);

量词

例子，得到所有标签

    let ss = `<div><span>sa</span><h2>sdada</h2></div>`
    let ss1 = ss.match(/<\/?\w[a-z0-9]*>/ig)
    console.log(ss1);//['<div>', '<span>', '</span>', '<h2>', '</h2>', '</div>']

贪婪和惰性模式

对于这个例子

    let ss = '<asdada>  <asda222>  <4546adw3>'
    let ss1 = ss.match(/<.+>/ig)
    console.log(ss1);

我想得到的结果是ss1数组里面有三个元素，但是结果只有一个

['<asdada> <asda222> <4546adw3>']

也就是说，这里在匹配 > 时，默认的是最后一个 >，所以.+采用的就是贪婪模式

但是如果这么写 /<.+?>/ 就是惰性模式，惰性模式用的更多

    let ss = '<asdada>  <asda222>  <4546adw3>'
    let ss1 = ss.match(/<.+?>/ig)
    console.log(ss1);// ['<asdada>', '<asda222>', '<4546adw3>']

捕获组

如果对于上面那个例子，我只想拿到<>中间的内容，就可以使用（）分组：

    let ss = '<asdada>  <asda222>  <4546adw3>'
    let ss1 = ss.matchAll(/<(.+?)>/ig)
    for(let item of ss1){
      console.log(item);
    }

需要注意的是，这里匹配只能用matchAll，返回迭代器

这里item是一个数组，第一个元素是全匹配，第二个元素就是第一个分组了

所以直接将item看成数组取值就行

    let ss = '<asdada>  <asda222>  <4546adw3>'
    let ss1 = ss.matchAll(/<(.+?)>/ig)
    for(let item of ss1){
      console.log(item[1]);
    }

分组也可以用来作为整体，这里我想匹配最少两个abc连起来的字符串，就可以用括号，如果不用分组，那么匹配的是多个c 而不是多个abc

    let ss = 'asdasdabcabcioiojpjabcabcabckkkkabc'
    let ss1 = ss.match(/(abc){2,}/ig)
    console.log(ss1);//['abcabc', 'abcabcabc']

常用方法

test函数，例子，最少输入五个a才能通过

  <input type="text" class="ipt">
  <p class="ifo"></p>
  <script>
    let ipt = document.querySelector('.ipt')
    let ifo = document.querySelector('.ifo')

    ipt.addEventListener('input',function(){
      if (/aaaaa/ig.test(ipt.value)){
        ifo.innerHTML = 'YES'
      }
      else{
        ifo.innerHTML = 'no'
      }
    })

  </script>

match函数，取出符合要求的字符串，形成数组

    let ss = 'asdasdabc Abc ABc  ABC'
    let ss1 = ss.match(/abc/ig)
    console.log(ss1);

matchAll函数，返回一个迭代器，前提是正则必须有g 既全局搜索

    let ss = 'asdasdabc Abc ABc  ABC'
    let ss1 = ss.matchAll(/abc/ig)
    console.log(ss1.next());
    console.log(ss1.next());
    console.log(ss1.next());