正则
2018-11-18 本文已影响0人
致自己_cb38
1. 字符串查询的一些函数
search
charAt
split
substring
slice
2.正则的创建
var re = new RegExp('a','修正'); //js所特有的创建方式
var re = /a/修正; //定界符 perl语言风格
- 修正是一些特殊意义的符号：
i: 忽略大小写
g:全局匹配
https://www.2cto.com/kf/201207/140376.html
3.re.test()
判断正则是否能够匹配带内容，如果可以返回true，否则返回false。
4.str.match(re)
返回匹配到的内容
5.re.exec(str)
返回匹配到的内容
6.str.replace(re,要替换的内容);
eg:敏感词过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text">
<button>发送</button>
<div></div>
</body>
<script>
var div = document.querySelector('div');
var input = document.querySelector('input');
var btn = document.querySelector('button');
btn.onclick = function(){
var re = /杀人|SB|sb|傻逼|黄网|炸金花/g;
div.innerText += input.value.replace(re,'***') + '\n';
input.value = '';
};
</script>
</html>
eg:过滤HTML标签（替换小说）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<textarea name="" id="t1" cols="30" rows="10"></textarea>
<input type="button" value="转换">
<textarea name="" id="t2" cols="30" rows="10"></textarea>
<script>
var tx = document.getElementsByTagName('textarea');
var inp = document.getElementsByTagName('input')[0];
inp.onclick = function(){
var re = /<[^<>]+>/g;
console.log(tx[0].value.replace(re,''));
tx[1].value = tx[0].value.replace(re,'');
};
</script>
</body>
</html>
eg:邮箱验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
var str = 'pdvpp12@vp.com.nvdnd';
//获取所有[0-9a-zA-Z_]的内容+@+所有[0-9a-z]的内容+所有.[0-9a-z]的内容（任意次数），不区分大小写
var re = /\w+@[0-9a-z]+(\.[0-9a-z]+)+/i;
console.log(str.match(re));
</script>
</html>
7.str.search(re)
查询返回的是字符串的位置
8.元字符 一个 []
- 具体字符选择
[abc]dc=adc| bdc | cdc - 范围
[a-z] a......z
[0-9] 0123456789
[A-Z] A.......Z - 取反
[^0-9]
[^a-z]
[^abc]
9.原子
- . 任何
- \d === [0-9] 数字
- \D === [^0-9] 为数字
- \w ===[0-9a-zA-Z_] 字母数字下滑线
- \W ===[^0-9a-zA-Z_] 不是字母数字下滑线
- \s === 空白字符
- \S === 非空白字符
10.量词:出现的次数
- {m} 出现m次
- {n,m}出现n-m次
- {n,} 至少出现n次
- +=== {1，} 至少出现1次
- ? === {0,1} 有或者没有
- *=== {0，} 出现多少次都行 容易出现问题
11. 信息采集 爬虫
贪婪：尽可能的匹配最长的结果。
12.边界符
- ^ 以什么开始
- $ 以什么结束
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var str = 'dkhsahdklsaunadbsnjfkhbudsgfnbvelwjgSBDH';
var re = /^d.*H$/g;
console.log(str.match(re));
</script>
</body>
</html>
案例
- 查找数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var str = 'asd302nbdsjknjk219iknsjknca219343knsjk739bjk_rh32.sfh222';
// console.log(parseInt(str[0]))//nan
var temp = '';
var arr = [];
//遍历
for(var i =0;i<str.length;i++){
//是否为数字
if(!isNaN(parseInt(str[i]))){
temp = temp + str[i];
}else{
if(temp){
arr.push(temp);
temp = '';
}
}
}
if(temp){
arr.push(temp);
temp = '';
}
console.log(arr);
/*Array(6)
0: "302"
1: "219"
2: "219343"
3: "739"
4: "32"
5: "222"
*/
</script>
</body>
</html>
- 百度注册
2<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
form{
width: 600px;
height: 500px;
margin: 100px auto;
}
.show{
display: none;
}
</style>
</head>
<body>
<form action="1.php" method="post">
用户名 <input type="text" placeholder="请设置用户名">
<span class="show">设置后不可更改，不可使用中文，最长14个字符</span><br><br>
手机号 <input type="text" placeholder="可用于登陆和找回密码">
<span class="show">请输入中国大陆手机号，其他用户不可见</span><br><br>
密码 <input type="password" placeholder="设置登陆密码">
<span class="show">长度为6-14个字符，支持数字、大小写字母</span><br><br>
验证码 <input type="text" placeholder="请输入验证码">
<input type="button" value="获取短信验证码"><br><br>
<input type="checkbox">
<span>阅读并接受</span>
<a href="###">《百度用户协议》</a>
<span>及</span>
<a href="###">《百度隐私权保护声明》</a><br><br>
<input type="submit" placeholder="注册">
</form>
</body>
<script>
var is_submit = true;
var form = document.getElementsByTagName('form')[0];
var input = document.getElementsByTagName('input');
var btn = document.getElementsByTagName('button')[0];
var show = document.getElementsByTagName('span');
if (is_submit) {
form.onsubmit = function(){
var is_commit = true;
//判断用户名是否与所给范围匹配
var re = /^[0-9a-zA-Z]{6,14}$/;
if (!re.test(input[0].value)) {
is_commit = false;
alert('用户名错误');
}
//判断手机格式是否与所给范围匹配
var re = /^1[3456789]\d{9}$/;
if (!re.test(input[1].value)) {
is_commit = false;
alert('手机格式错误');
}
//判断登陆密码是否与所给范围匹配
var re = /^[0-9a-zA-Z]{6,14}$/;
if (!re.test(input[2].value)) {
is_commit = false;
alert('登陆密码错误');
}
//判断验证码是否与所给范围匹配
var re = /\d{4}/;
if (!re.test(input[3].value)) {
is_commit = false;
alert('验证码错误');
}
//判断是否提交
if (!is_commit) {
return false;
}
alert('可以提交');
};
input[4].onclick = function(){
if (input[4].value > 0) {
return false;
}
var time = 30;
input[4].value = time;
//倒计时
var timer = setInterval(function(){
time--;
if (input[4].value <= 0) {
input[4].value = '获取短信验证码';
clearTimeout(timer);
return false;
}
input[4].value = time;
},1000);
};
}
input[6].onclick = function(){
//判断checked
if (input[5].checked) {
is_submit = true;
}else{
is_submit = false;
alert('未勾上阅读并接受 《百度用户协议》 及 《百度隐私权保护声明》');
}
if (!is_submit) {
return false;
}
};
//提示内容出现隐藏
input[0].onclick = function(){
for (var i = 0; i < show.length; i++) {
show[i].style.display = '';
}
show[0].style.display = 'inline-block';
};
input[1].onclick = function(){
for (var i = 0; i < show.length; i++) {
show[i].style.display = '';
}
show[1].style.display = 'inline-block';
};
input[2].onclick = function(){
for (var i = 0; i < show.length; i++) {
show[i].style.display = '';
}
show[2].style.display = 'inline-block';
};
input[3].onclick = function(){
for (var i = 0; i < show.length; i++) {
show[i].style.display = '';
}
};
</script>
</html>
