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>
40
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
