4、正则表达式、本地存储

一、正则表达式

1、定义

• 用事先定义好的一些特定字符，这样的字符组合，组合成一个“规则字符串”

2、正则的组成

特殊字符

• 字母、数字、下划线、中文、特殊字符…

元字符（常用）

• 1、\d 匹配至少有一个数字

var reg = /\d/  //字面量创建
var inputObj = document.getElementById('user')
inputObj.onblur = function () {
  console.log(reg.test(input.value))
}
1
2
3
4
5

• 2、\D 匹配至少有一个不是数字的字符

var str = '2 jdjfjjs哈哈'
var reg = /\D/
console.log(reg.test(str))//true
1
2
3

• 3、\w 匹配至少一个字母或数字或下划线

var str = '前端_8A%$^%^&*'
var reg = new RegExp(/\w/)
console.log(reg.test(str))//true
1
2
3

• 4、\W 匹配至少有一个不是字母，数字，下划线

var reg = new RegExp(/\W/)
console.log(reg.test('23A D__D汉字'))//true
1
2

• 5、\s 匹配至少有一个空白符

var reg = new RegExp(/\s/)
console.log(reg.test('23AD__   D汉 字'))//true
1
2

• 6、\S 匹配至少一个不是空白符的字符

var reg = /\S/
console.log(reg.test(' 5     '))//true
1
2

• 7、. 匹配至少有一个非换行符

var reg = /./
console.log(reg.test('\n\n\n\n %  \n\n'))//true
1
2

• 8、^ 表示匹配行首的文本(以谁开始)

var reg = /^2/
console.log(reg.test('2iidfkjdf5454'))//true
var reg = /^ABC/
console.log(reg.test('ABCiidfkjdf5454'))//true
var reg = /^\d/   //至少有一个数字开头
console.log(reg.test('210ABCiidfkjdf5454'))//true
var reg = /^\S/   //开头至少有一个空白符
console.log(reg.test('210ABCiid fkjdf5454'))//true
1
2
3
4
5
6
7
8

• 9、$ 表示匹配行尾的文本(以谁结束)

var reg = /2$/
console.log(reg.test('2iidfkjdf54542'))//true
var reg = /^2$/
console.log(reg.test('2'))//true
var reg = /^\d$/
console.log(reg.test('6'))//true
1
2
3
4
5
6

限定符

• 1、* 重复零次或更多次\d*
  /^ab*$/：表示一个字符串有一个a后面跟着零个或若干个b。

var reg = new RegExp(/^ab*$/)
console.log(reg.test('abbbbb'))//true
1
2

• 2、+ 重复一次或更多次\d+

var reg = new RegExp(/\d+/)
console.log(reg.test('a123213'))//true
var reg = new RegExp(/ab+/)
console.log(reg.test('bbbbbbbbaab'))//true
var reg = new RegExp(/^xy+/)
console.log(reg.test('xy前端9898前9前99'))//true
1
2
3
4
5
6

• 3、? 重复零次或一次
  /^ab?$/：表示一个字符串有一个a后面跟着零个或者一个b(备注：添{加}^{和}$)

console.log(reg.test('xy'))
1

• 4、{n} 至少重复n次

var reg = /u{5}/
console.log(reg.test('xuuuuuy'))//连续5次
var reg = /\s{3}/
console.log(reg.test('   xuuusssuuy'))//以三个空格
1
2
3
4

• 5、^{n}$ 必须重复n次

var reg = /^u{5}$/
console.log(reg.test('uuuuu'))//true
1
2

• 6、{n,m} 重复n到m次

var reg = /^A{2,7}$/
console.log(reg.test('AA'))//true
1
2

• 7、匹配全数字

var reg = /^\d+$/
console.log(reg.test('044635432132132101'))//true
1
2

其他符号

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

var reg = /[ab]/
console.log(reg.test('2545ab'))//true
var reg = /[0-9]/
console.log(reg.test('SDSD5823165722SD'))//true
// 匹配全数字
var reg = /^[0-9]+$/
1
2
3
4
5
6

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

// 匹配小数
var reg = /^\d+\.\d+$/
var reg = /^\d+[.]\d+$/
console.log(reg.test('5.36'))
1
2
3
4

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

// 匹配正负小数   5123.36   -5.36   +5.23
var reg = new RegExp(/^\d+\.\d+$|^[-]?[0-9]+\.[0-9]+$/)
console.log(reg.test('-93.89'))
1
2
3

• 4、匹配字母

var reg = /[a-z]/
var reg = /[A-Z]/
var reg = /[A-Za-z]/
console.log(reg.test('542SDSDrtrtSDSGR$TRGCV4'))
1
2
3
4

3、正则表达式的应用(3个)

匹配：test()

提取：match()

g:全局匹配 i:忽略大小写 gi:全局匹配+忽略大小写

• match()：提取字符串中的字符，返回一个数组 字符串.match(子字符串) 字符串.match(正则表达式)

var str = 'one 1005 2 tWO222 3 three 4fOur'
// 提取2
console.log(str.match('2')) //1个
console.log(str.match(/2/)) //1个
console.log(str.match(/2/g)) //['2', '2', '2', '2']
console.log(str.match(/o/gi)) //['o', 'O', 'O']
1
2
3
4
5
6

替换：replace(old,new)

var str = 'one 1005 2 tWO222 3 three 4fOur'
//one 1AA5 2 tWO222 3 three 4fOur
console.log(str.replace('0', 'A').replace('0', 'A'))
console.log(str.replace(/0/g, 'A'))//one 1AA5 2 tWO222 3 three 4fOur
1
2
3
4

4、创建正则表达式对象

字面量创建： var 变量 = /正则特定字符或者组合/

var reg = /\d/  //字面量创建
1

构造函数创建： var 变量 = new RegExp (/正则特定字符或者组合/)

var reg = new RegExp(/\d/) //构造函数创建
1

二、HTML5的web存储

• localStorage 和sessionStorage

localStorage：存储没有时间限制，需要手动清除本地数据

1、length：存储数据的个数

console.log(localStorage.length)

2、setItem(key,value)存储数据

document.getElementById('save').onclick = function () {
localStorage.setItem('name', '小花')
localStorage.setItem('age', '18')
localStorage.setItem('sex', false)
console.log(localStorage)
}
1
2
3
4
5
6

3、getItem(key);通过了key获取value

document.getElementById('get').onclick = function () {
  console.log(localStorage.getItem('age'))
}
1
2
3

4、removeItem(key);删除单个数据

document.getElementById('remove').onclick = function () {
  localStorage.removeItem('name')
  console.log(localStorage)
}
1
2
3
4

5、clear()删除所有数据

document.getElementById('clear').onclick = function () {
  localStorage.clear()
  console.log(localStorage)
}
1
2
3
4

6、得到某个索引的key：localStorage.key(index);

• 通过数字获取第几个key

console.log(localStorage.key(0))
console.log(localStorage.key(1))
console.log(localStorage.key(2))
1
2
3

sessionStorage：浏览器关闭后，数据自动清除

• API与localStorage相同

三、本地存储练习

//---直接写 οnclick="add();  下面就不用获取-----------
<button id="add" onclick="add();">新增记录</button>
<scsript>
//获取元素
var result = document.getElementById("result")//输出表格或者文本
dataShow()//先调用  没有数据显示null
// 2、新增记录
function add() {
    var siteName = document.getElementById("siteName")//网站名
    var siteValue = document.getElementById("siteValue")//网址
    localStorage.setItem(siteName.value, siteValue.value)//存储key  value
    alert("添加成功！")
    console.log(localStorage);
    dataShow()//添加数据以后还要调用 显示到表格
}
// 3、查找网站
function search() {
    var searchName = document.getElementById("searchName").value//网站名value值
    var wangzhi = localStorage.getItem(searchName)//网址的value值
    text.innerText = searchName + "的网址是：" + wangzhi //显示查出来的网址
}
// 1、表格或者文字显示
function dataShow() {
    console.log(localStorage);
    if (localStorage.length == 0) {//如果没有数据
        result.innerText = "数据为空......"
    } else {
        var str = "<table border='1'><tr><td>key</td><td>value</td></tr>"
        for (var i = 0; i < localStorage.length; i++) {//tr的个数与localStorage.length的个数一样
            str += "<tr><td>" + localStorage.key(i) + "</td><td>"+localStorage.getItem(localStorage.key(i))+"</td></tr>"    
        }
        str += "</table>"
        result.innerHTML=str//最后把str给result
    }
}
</script>
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
33
34
35
36

四、cookies、sessionStorage和localStorage解释及区别？