storage和正则表达式

一、Storage

1.认识Storage

WebStorage主要提供了一种机制,可以让浏览器提供一种比cookie更直观的key、value存储方式:

  • localStorage:本地存储,提供的是一种永久性的存储方法,在关闭掉网页重新打开时,存储的内容依然保留;
  • sessionStorage:会话存储,提供的是本次会话的存储,在关闭掉会话时,存储的内容会被清除;
javascript 复制代码
localStorage.setItem("name", "local");
sessionStorage.setItem("name", "session");

2.localStorage和sessionStorage的区别

我们会发现localStorage和sessionStorage看起来非常的相似。

那么它们有什么区别呢?

  • 验证一:关闭网页后重新打开,localStorage会保留,而sessionStorage会被删除;
  • 验证二:在页面内实现跳转,localStorage会保留,sessionStorage也会保留;
  • 验证三:在页面外实现跳转(打开新的网页),localStorage会保留,sessionStorage不会被保留;

3.Storage常见的方法和属性

Storage有如下的属性和方法:

属性

Storage.length:只读属性

  • 返回一个整数,表示存储在Storage对象中的数据项数量;

方法

Storage.key():该方法接受一个数值n作为参数,返回存储中的第n个key名称;

Storage.getItem():该方法接受一个key作为参数,并且返回key对应的value;

Storage.setItem():该方法接受一个key和value,并且将会把key和value添加到存储中。

  • 如果key存储,则更新其对应的值;

Storage.removeItem():该方法接受一个key作为参数,并把该key从存储中删除;

Storage.clear():该方法的作用是清空存储中的所有key;

javascript 复制代码
const ACCESS_TOKEN = "token"

console.log(localStorage.length)
// 常见的方法:
localStorage.setItem(ACCESS_TOKEN, "whytoken")
console.log(localStorage.getItem(ACCESS_TOKEN))

// 其他方法
console.log(localStorage.key(0))
console.log(localStorage.key(1))
console.log(localStorage.removeItem("infoTab"))
localStorage.clear()

4.Storage工具封装

javascript 复制代码
class Cache {
  constructor(isLocal = true) {
    this.storage = isLocal ? localStorage: sessionStorage
  }

  setCache(key, value) {
    if (!value) {
      throw new Error("value error: value必须有值!")
    }

    if (value) {
      this.storage.setItem(key, JSON.stringify(value))
    }
  }

  getCache(key) {
    const result = this.storage.getItem(key)
    if (result) {
      return JSON.parse(result)
    }
  }

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

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

const localCache = new Cache()
const sessionCache = new Cache(false)
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script src="./js/cache.js"></script>
  <script>

    localCache.setCache("sno", 111)

    // storage本身是不能直接存储对象类型的
    const userInfo = {
      name: "abc",
      nickname: "def",
      level: 100,
      imgURL: "http://github.com/abc.png"
    }

    // localStorage.setItem("userInfo", JSON.stringify(userInfo))
    // console.log(JSON.parse(localStorage.getItem("userInfo")))

    sessionCache.setCache("userInfo", userInfo)
    console.log(sessionCache.getCache("userInfo"))

  </script>

</body>
</html>

二、正则表达式

1.什么是正则表达式?

我们先来看一下维基百科对正则表达式的解释:

  • 正则表达式(英语:Regular Expression,常简写为regex、regexp或RE),又称正则表示式、正则表示法、规则表达式、常规表示法,是计算机科学的一个概念;
  • 正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。
  • 许多程序设计语言都支持利用正则表达式进行字符串操作。

简单概况:正则表达式是一种字符串匹配利器,可以帮助我们搜索、获取、替代字符串;

在JavaScript中,正则表达式使用RegExp类来创建,也有对应的字面量的方式:

  • 正则表达式主要由两部分组成:模式 (patterns)和修饰符(flags)
javascript 复制代码
const re1 = new RegExp("hello", "i")
const re2 = /hello/i

2.正则表达式的使用方法

有了正则表达式我们要如何使用它呢?

  • JavaScript中的正则表达式被用于 RegExp 的 exec 和 test 方法;
  • 也包括 String 的 match、matchAll、replace、search 和 split 方法;
javascript 复制代码
// 创建正则
const re1 = /abc/ig
const message = "fdabc123 faBC323 dfABC222 A2324aaBc"

// 1.使用正则对象上的实例方法
// webpack -> loader -> test: 匹配文件名
// 正则 -> 拿到文件 -> loader操作
// 1.1.test方法: 检测某一个字符串是否符合正则的规则
// if (re1.test(message)) {
//   console.log("message符合规则")
// } else {
//   console.log("message不符合规则")
// }

// 1.2.exec方法: 使用正则执行一个字符串
// const res1 = re1.exec(message)
// console.log(res1)


// 2.使用字符串的方法, 传入一个正则表达式
// 2.1. match方法:
// const result2 = message.match(re1)
// console.log(result2)

// 2.2. matchAll方法
// 注意: matchAll传入的正则修饰符必须加g
// const result3 = message.matchAll(re1)
// // console.log(result3.next())
// // console.log(result3.next())
// // console.log(result3.next())
// // console.log(result3.next())
// for (const item of result3) {
//   console.log(item)
// }

// 2.3. replace/replaceAll方法

// 2.4. split方法
// const result4 = message.split(re1)
// console.log(result4)

// 2.5. search方法
const result5 = message.search(re1)
console.log(result5)


// 案例: 让用户输入的账号必须是aaaaa以上
// const inputEl = document.querySelector("input")
// const tipEl = document.querySelector(".tip")

// inputEl.oninput = function() {
//   const value = this.value
//   if (/^a{5,8}$/.test(value)) {
//     tipEl.textContent = "输入的内容符合规则要求"
//   } else {
//     tipEl.textContent =  "输入的内容不符合规则要求, 请重新输入"
//   }
// }

3.修饰符flag的使用

常见的修饰符

flag 含义
g 全部的,给我匹配全部的
i 忽略大小写
m 多行匹配

需求:

  • 获取一个字符串中所有的abc
  • 将一个字符串中的所有abc换成大写
javascript 复制代码
let message = "Hello abc, abc, Abc, AAaBc"
const pattern = /abc/ig
const results = message.match(pattern)
console.log(results)

message = message.replaceAll(pattern, "ABC")
console.log(message)

4.规则 -- 字符类(Character classes)

字符类(Character classes) 是一个特殊的符号,匹配特定集中的任何符号。

字符 含义
\d("d" 来自 "digit") 数字:从 0 到 9 的字符。
\s("s" 来自 "space") 空格符号:包括空格,制表符 \t,换行符 \n 和其他少数稀有字符,例如 \v,\f 和 \r。
\w("w" 来自 "word") "单字"字符:拉丁字母或数字或下划线 _。
.(点) 点 . 是一种特殊字符类,它与 "除换行符之外的任何字符" 匹配

反向类(Inverse classes)

  • \D 非数字:除 \d 以外的任何字符,例如字母。
  • \S 非空格符号:除 \s 以外的任何字符,例如字母。
  • \W 非单字字符:除 \w 以外的任何字符,例如非拉丁字母或空格。
javascript 复制代码
const message = "CSS2.5"
const pattern = /CSS\d(\.\d)?/i
console.log(message.match(pattern))

5.规则 -- 锚点(Anchors)

符号 ^ 和符号 $ 在正则表达式中具有特殊的意义,它们被称为"锚点"。

  • 符号 ^ 匹配文本开头
  • 符号 $ 匹配文本末尾
javascript 复制代码
const message = "My name is WHY."

// 字符串方法
if (message.startsWith("my")) {
    console.log("以my开头")
}
if (message.endsWith("why")) {
    console.log("以why结尾")
}

// 正则: 锚点
if (/^my/i.test(message)) {
    console.log("以my开头")
}

if (/why\.$/i.test(message)) {
    console.log("以why结尾")
}


const re = /^coder$/
const info = "codaaaer"
console.log(re.test(info)) // false

词边界(Word boundary)

  • 词边界 \b 是一种检查,就像 ^ 和 $ 一样,它会检查字符串中的位置是否是词边界
  • 词边界测试 \b 检查位置的一侧是否匹配 \w,而另一侧则不匹配 "\w"

匹配下面字符串中的时间:

javascript 复制代码
const message = "now time 22:45, number is 123.456"
const timepattern = /\b\d\d:\d\d\b/g
console.log(message.match(timepattern))

6.规则 -- 转义字符串

如果要把特殊字符作为常规字符来使用,需要对其进行转义

  • 只需要在它前面加个反斜杠

常见的需要转义的字符:

[] \ ^ $ . | ? * + ()

  • 斜杠符号 / 并不是一个特殊符号,但是在字面量正则表达式中也需要转义;

练习:匹配所有以.js或者jsx结尾的文件名

javascript 复制代码
const filenames = ["abc.js", "cba.java", "nba.html"]
const newNames = filenames.filter(item => {
    return /\.jsx?$/.test(item)
})

在webpack当中,匹配文件名时就是以这样的方式。

javascript 复制代码
// 定义正则: 对.转义
const re = /\./ig
const message = "abc.why"

const results = message.match(re)
console.log(results)


// 特殊: /
// const re2 = /\//

// 获取到很多的文件名
// jsx -> js文件
const fileNames = ["abc.html", "Home.jsx", "index.html", "index.js", "util.js", "format.js"]
// 获取所有的js的文件名(webpack)
// x?: x是0个或者1个
const jsfileRe = /\.jsx?$/
// 1.for循环做法
// const newFileNames = []
// for (const filename of fileNames) {
//   if (jsfileRe.test(filename)) {
//     newFileNames.push(filename)
//   }
// }
// console.log(newFileNames)

// 2.filter高阶函数
// const newFileNames = fileNames.filter(filename => jsfileRe.test(filename))
// console.log(newFileNames)

7.集合(Sets)和范围(Ranges)

有时候我们只要选择多个匹配字符的其中之一就可以:

  • 在方括号 [...] 中的几个字符或者字符类意味着"搜索给定的字符中的任意一个";

集合(Sets)

  • 比如说,[eao] 意味着查找在 3 个字符 'a'、'e' 或者 'o' 中的任意一个`;

范围(Ranges)

  • 方括号也可以包含字符范围;
  • 比如说,[a-z] 会匹配从 a 到 z 范围内的字母,[0-5] 表示从 0 到 5 的数字;
  • [0-9A-F] 表示两个范围:它搜索一个字符,满足数字 0 到 9 或字母 A 到 F;
  • \d ------ 和 [0-9] 相同;
  • \w ------ 和 [a-zA-Z0-9_] 相同;

案例:匹配手机号码

javascript 复制代码
const phonePattern = /^1[356789]\d{9}$/

排除范围:除了普通的范围匹配,还有类似 [^...] 的"排除"范围匹配;

javascript 复制代码
// 手机号的规则: 1[3456789]033334444
const phoneStarts = ["132", "130", "110", "120", "133", "155"]
const phoneStartRe = /^1[3456789]\d/
const filterPhone = phoneStarts.filter(phone => phoneStartRe.test(phone))
console.log(filterPhone)

const phoneNum = "133888855555"
const phoneRe = /^1[3-9]\d{9}$/
console.log(phoneRe.test(phoneNum))

// 了解: 排除范围
// \d -> [0-9]
// \D -> [^0-9]

8.量词(Quantifiers)

假设我们有一个字符串 +7(903)-123-45-67,并且想要找到它包含的所有数字。

  • 因为它们的数量是不同的,所以我们需要给与数量一个范围;
  • 用来形容我们所需要的数量的词被称为量词( Quantifiers )。

数量 {n}

  • 确切的位数:{5}
  • 某个范围的位数:{3,5}

缩写:

  • +:代表一个或多个,相当于 {1,}
  • ?:代表零个或一个,相当于 {0,1}。换句话说,它使得符号变得可选;
  • *:代表着零个或多个,相当于 {0,}。也就是说,这个字符可以多次出现或不出现;

案例:匹配开始或结束标签

javascript 复制代码
// 1.量词的使用
const re = /a{3,5}/ig
const message = "fdaaa2fdaaaaaasf42532fdaagjkljlaaaaf"

const results = message.match(re)
console.log(results)

// 2.常见的符号: +/?/*
// +: {1,}
// ?: {0,1}
// *: {0,}

// 3.案例: 字符串的html元素, 匹配出来里面所有的标签
const htmlElement = "<div><span>哈哈哈</span><h2>我是标题</h2></div>"
const tagRe = /<\/?[a-z][a-z0-9]*>/ig
const results2 = htmlElement.match(tagRe)
console.log(results2)

9.贪婪( Greedy)和惰性( lazy)模式

如果我们有这样一个需求:匹配下面字符串中所有使用《》包裹的内容

javascript 复制代码
const message = "我最喜欢的两本书:《黄金时代》和《沉默的大多数》"
const results = message.match(/《.+》/g)
console.log(results)

默认情况下的匹配规则是查找到匹配的内容后,会继续向后查找,一直找到最后一个匹配的内容

  • 这种匹配的方式,我们称之为贪婪模式(Greedy)

懒惰模式中的量词与贪婪模式中的是相反的。

  • 只要获取到对应的内容后,就不再继续向后匹配
  • 我们可以在量词后面再加一个问号 ? 来启用它;
  • 所以匹配模式变为 *? 或 +?,甚至将 '?' 变为 ??
javascript 复制代码
const message = "我最喜欢的两本书:《黄金时代》和《沉默的大多数》"
const results = message.match(/《.+?》/g)
console.log(results)

10.捕获组(capturing group)

模式的一部分可以用括号括起来 (...),这称为"捕获组(capturing group)"。

这有两个作用:

  • 它允许将匹配的一部分作为结果数组中的单独项
  • 它将括号视为一个整体;

方法 str.match(regexp),如果 regexp 没有 g 标志,将查找第一个匹配并将它作为一个数组返回:

  • 在索引 0 处:完全匹配。
  • 在索引 1 处:第一个括号的内容。
  • 在索引 2 处:第二个括号的内容。
  • ...等等...

案例:匹配到HTML标签,并且获取其中的内容

javascript 复制代码
const str = "<h1>title</h1>"
const result = str.match(/<(.+?)>/)
console.log(result[0])
console.log(result[1])

命名组:

  • 用数字记录组很困难。
  • 对于更复杂的模式,计算括号很不方便。我们有一个更好的选择:给括号起个名字。
  • 这是通过在开始括号之后立即放置 ? 来完成的。
javascript 复制代码
const result = message.match(/(?<codermq>hel)lo/i)

非捕获组:

  • 有时我们需要括号才能正确应用量词,但我们不希望它们的内容出现在结果中。
  • 可以通过在开头添加 ?: 来排除组。
javascript 复制代码
const result = message.match(/(?<codermq>hel)(lo)/)

or是正则表达式中的一个术语,实际上是一个简单的"或"。

  • 在正则表达式中,它用竖线 | 表示;
  • 通常会和捕获组一起来使用,在其中表示多个值;
javascript 复制代码
// 1.将捕获组作为整体
const info = "dfabcabcfabcdfdabcabcabcljcbacballnbanba;jk;j"
const abcRe = /(abc|cba|nba){2,}/ig
console.log(info.match(abcRe))

11.封装日期格式化函数

javascript 复制代码
function formatDate(timestamp, formatString) {
    const date = new Date(timestamp);
    const obj = {
        "y+": date.getFullYear(),
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds(),
        "S+": date.getMilliseconds()
    };

    for (const key in obj) {
        if (new RegExp(`(${key})`).test(formatString)) {
            const value = (obj[key] + "").padStart(2, "0");
            formatString = formatString.replaceAll(RegExp.$1, value);
        }
    }
    return formatString;
}
const nowDate = Date.now();
const formatStr = formatDate(nowDate, "yyyy-MM-dd hh:mm:ss.SSS");
console.log(formatStr);
相关推荐
学习前端的小z4 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜27 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40428 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish29 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple29 分钟前
typescript里面正则的使用
开发语言·javascript·正则表达式
小五Five30 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序30 分钟前
vue3 封装request请求
java·前端·typescript·vue
临枫54131 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
前端每日三省32 分钟前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript
小刺猬_98532 分钟前
(超详细)数组方法 ——— splice( )
前端·javascript·typescript