JS笔记
创建正则表达式
- 通过new去声明正则表达式
第一个参数:正则表达式的主体,字符串
第二个参数:修饰符(i/g)【注】修饰符没有顺序
var demo1 = new RegExp("hello","ig"); alert(demo1); /hello/gi
- 省略new运算符去声明正则表达式
var demo2 = RegExp("hello","ig"); alert(demo2); /hello/gi
- 通过常量赋值
var demo3 = /hello/ig;
正则表达式方法
- test
格式:正则.test(字符串)
功能:在字符串中匹配这个正则是否存在
返回值:如果匹配成功返回true,匹配失败返回false
var str = "hello world";
var demo = /hello/;
alert(demo.test(str));//true
- exec
格式:正则.exec(字符串)
功能:在字符串中匹配这个正则是否存在
返回值:返回匹配到的字符串。匹配成功,返回装有字符串的数组;失败,返回null
var str = "hELlo world";
var demo = /hello/i;
alert(demo.exec(str));//hELlo
字符串中可以使用正则的方法
- match()
格式:字符串.match(正则);
功能:在字符串匹配是否有符合正则表达式
返回值:匹配成功,返回装有匹配到子串的数组;失败,返回null
/* var str = "hello hELlo HELLO world";
var demo = /hello/;
alert(str.match(demo));//hello */
/* var str = "hello hELlo HELLO world";
var demo = /hello/i;
alert(str.match(demo)); //hello */
/* var str = "hello hELlo HELLO world";
var demo = /hello/gi;
alert(str.match(demo)); //hello,hELlo,HELLO */
var str = "hello hELlo HELLO world";
var demo = /hellow/gi;
alert(str.match(demo));//null
- replace()
格式:字符串.replace(oldStr,newStr);//oldStr可以正则
功能:用newStr将oldStr替换
返回值:替换成功的新字符串
var str = "how are Are ARE you";
var newStr = str.replace(/are/gi, "*");
alert(newStr);//how * * * you
- split()
格式:字符串.split(分割符/正则);
功能:用分隔符将原字符串进行分割
返回值:分割剩下的子串组成的数组
var str = "how are Are ARE you";
var arr = str.split("are");
alert(arr); //how , Are ARE you
var str = "how are Are ARE you";
var arr = str.split(/are/i);
alert(arr); //how , , , you
- search()
格式:字符串.search(子串/正则);
功能:找到符合条件的子串第一次出现的位置
返回值:找到,返回>=0的下标;否则,返回-1
var str = "how Are are ARE you";
alert(str.search("are")); //8
alert(str.search(/are/i));//4
元字符
在正则表达式中有特殊含义的字符
- 单个数字和字符的元字符
元字符 | 含义 |
---|---|
. | 匹配单个的任意字符 |
[ ] | 匹配单个范围内的字符 |
[0-9] | 匹配单个的数字 (同\d) |
[a-zA-Z0-9_ | 匹配单个的数字、字母、下划线 (同\w) |
\W | 匹配单个非数字、字母、下划线 |
\D | 匹配单个非数字(等价于[^0-9] ) |
[^] | 匹配任意一个除括号范围内的字符 |
var str = "c1rome";
//var demo = /c[0-9]rome/; true
//var demo = /c.rome/; true
//var demo = /c[a-zA-Z0-9_]rome/; true
//var demo = /c[^0-9]rome/; false
alert(demo.test(str));
- 重复字符(x表示任意的单个字符)
元字符 | 含义 |
---|---|
x? | 匹配0个或1个x |
x+ | 匹配至少一个x字符 |
x* | 匹配任意个x字符 |
x{m,n} | 匹配至少m个,最多n个x字符,包括n |
x{n} | 必须匹配n个x字符 |
(xyz)+ | 小括号括起来的部分当做单个字符处理 |
- 空白字符
\s 匹配任意单个的空白字符
\S 匹配任意单个非空白字符
var str = "chr\nome";
//var demo = /chr\some/; true
alert(demo.test(str));
- 锚字符
^ 行首匹配,必须以这个正则开头
$ 行尾匹配 ,必须以这个正则结尾
var str = "chr\nome";
//var demo = /chr\some/; true
//var demo = /^ch/; true
//var demo = /me$/; true
alert(demo.test(str));
补充
- 替代字符
|
var str = "google";
var demo = /google|firefox|opera/;
alert(demo.test(str));//true
- 修饰符
i
忽略大小写
g
全局匹配
m
换行匹配(如果在字符串中遇到换行,重新开始计算行首)
var str = "1.hello\n1.my\n3.world";
var demo = /^\d/gm;
alert(str.replace(demo, "*"));
正则练习
- 文件是否是压缩包(zip rar gz)
/*
转义字符:
\. 代表本来.字符的意思
\* 代表本来*字符的意思
*/
var demo = /^\w+\.(zip|rar|gz)$/;
alert(demo.test("r_task.rar"));//true
- 验证是否是正确的手机号码
var demo = /^\d{10}$/;
- 验证是否是正确的身份证号码
var demo = /^[1-9]\d{16}{\d|x}$/;
- 验证字符串是否是纯中文
var demo = /^[\u4e00-\u9fa5]+$/;
alert(demo.test("欢迎光临")); //true
表单密码强度验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: lightgray;
border: 1px solid lightslategray;
text-align: center;
padding: 50px;
margin: 100px auto;
}
#div1 input {
width: 200px;
height: 30px;
font-size: 18px;
margin-top: 10px;
}
#div1 span {
font-size: 14px;
color: gray;
}
#div1 .testCode {
width: 55px;
height: 25px;
line-height: 25px;
background-color: lavender;
color: black;
float: left;
margin-left: 10px;
margin-top: 10px;
}
</style>
<script>
window.onload = function () {
var oUsername = document.getElementById("username");
var oUsername_span = document.getElementById("username_span");
var oPassword = document.getElementById("password");
var oDiv = document.getElementById("div1");
var aDivs = oDiv.getElementsByClassName("testCode");
//添加失去焦点事件
oUsername.onblur = function () {
var oValue = oUsername.value;
if (oValue.length < 6 || oValue.length > 18) {
//1.用户名长度是否符合要求
oUsername_span.innerHTML = "!长度应为6-18个字符";
oUsername_span.style.color = "red";
} else if (!/[a-zA-Z]/.test(oValue[0])) {
//判断首字符是否是字母
oUsername_span.innerHTML = "!必须以英文字母开头";
oUsername_span.style.color = "red";
} else if (/\W/.test(oValue)) {
oUsername_span.innerHTML = "!必须字母、数字或下划线组成";
oUsername_span.style.color = "red";
} else {
oUsername_span.innerHTML = "√,可以注册!";
oUsername_span.style.color = "green";
}
};
//给密码输入框,添加键盘事件(keydown事件触发的时间在文本输入之前,用keyup)
oPassword.onkeyup = function () {
var oValue = this.value;
//每一次触发之前,都要将上一次样式全部清除
for (var i = 0; i < aDivs.length; i++) {
aDivs[i].style.backgroundColor = "lavender";
}
if (oValue.length >= 6) {
//开始密码强度验证
if (
/^\d+$/.test(oValue) ||
/^[a-z]+$/.test(oValue) ||
/^[A-Z]+$/.test(oValue)
) {
aDivs[0].style.backgroundColor = "orange";
} else if (
/\d/.test(oValue) &&
/[a-z]/.test(oValue) &&
/[A-Z]/.test(oValue)
) {
aDivs[2].style.backgroundColor = "orange";
} else {
aDivs[1].style.backgroundColor = "orange";
}
}
};
};
</script>
</head>
<body>
<div id="div1">
<input type="text" placeholder="请输入用户名" id="username" />
<span id="username_span"
>6-18位,可使用数字,字母,下划线,需以字母开头</span
>
<input type="text" placeholder="请输入密码" id="password" />
<div class="testCode">弱</div>
<div class="testCode">中</div>
<div class="testCode">强</div>
</div>
</body>
</html>
localStorage
本地存储技术
- localStorage(IE8以下不兼容)
永久存储
最大可以存储5M
只能存储string
setItem(name,value);
getItem(name);
removeItem(name);
- cookie
可以设置过期时间
最大可存储4KB
每一个域名下面最多可以存储50条数据(与上条互相限制) - sessionStorage(结合后台使用)
//<button id="btn1">delete</button>
if (!window.localStorage) {
alert("不支持");
} else {
/* localStorage.setItem("a", "1");
localStorage.b = "2";
localStorage["c"] = "3"; */
}
window.onload = function () {
var oBtn = document.getElementById("btn1");
oBtn.onclick = function () {//删除存储的a
localStorage.removeItem("a");
};
};
滑块的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#slide {
position: relative;
width: 600px;
height: 30px;
border: 1px solid black;
margin: 100px auto;
}
#block {
width: 30px;
height: 30px;
background-color: lawngreen;
position: absolute;
left: 100px;
}
#full {
width: 100px;
height: 30px;
background-color: lightsalmon;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<script>
window.onload = function () {
var oSlide = document.getElementById("slide");
var oFull = document.getElementById("full");
var oBlock = document.getElementById("block");
//重新获取是否存储滑动的位置
if (!window.localStorage) {
alert("浏览器不支持");
} else {
//取出本地存储的值
var l = localStorage.getItem("slide")
? localStorage.getItem("slide")
: 0;
oBlock.style.left = l + "px";
//填充部分跟随滑块,进行填充
oFull.style.width = l + "px";
}
oBlock.onmousedown = function (ev) {
var e = ev || window.event;
var offsetX = e.clientX - oBlock.offsetLeft;
document.onmousemove = function (ev) {
var e = ev || window.event;
//限制滑块的界限
var l = e.clientX - offsetX;
if (l <= 0) {
l = 0;
}
if (l >= 570) {
l = 570;
}
oBlock.style.left = l + "px";
//对当前滑块的位置进行本地存储
oFull.style.width = l + "px";
if (!window.localStorage) {
alert("浏览器不支持");
} else {
localStorage.setItem("slide", l);
}
};
};
document.onmouseup = function () {
document.onmousemove = null;
};
};
</script>
</head>
<body>
<div id="slide">
<div id="full"></div>
<div id="block"></div>
</div>
</body>
</html>