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

目录

Storage

localStorage与sessionStorage基本用法与区别

localStorage与sessionStorage区别 

其他常用方法 

 正则表达式

修饰符flag的使用

 匹配内容

 字符量

锚点与词边界 

转义字符

集合与范围

 量词

 贪婪和惰性模式

 捕获组

 常用方法

---

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区别 

说一下验证二

  "index.html">123
  <script>
 
    localStorage.setItem('name','zhangsan')
    sessionStorage.setItem('age',17)
 
 
  script>

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

验证三

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

  "index.html" target="_blank">123
  

转义字符

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

集合与范围

举个例子，选取第第一个数字是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 = `
sa
sdada
`
    let ss1 = ss.match(/<\/?\w[a-z0-9]*>/ig)
    console.log(ss1);//['
', '', '', '
', '
', '
']

 贪婪和惰性模式

对于这个例子

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

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

['    <4546adw3>']

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

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

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

 捕获组

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

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

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

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

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

    let ss = '    <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才能通过

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