<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键字,关键词">
<meta name="Description" content="描述和简介">
<title>Title</title>
<style type="text/css">
*{margin:0;padding:0;}
body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
a{text-decoration:none;}
img{border:none;}
ol,ul{list-style:none;}
</style>
</head>
<body>
<div id="box"></div>
<script>
/*
* 正则表达式: 规则,给计算机读取的规则,用来匹配字符串
*
* */
var str = "1234bf56789gf00";
var arr = [],s = "";
for(var i = 0; i < str.length; i++){
if( !isNaN(str.charAt(i)) ){//原本是数字,判断为false,所以取反
s += str.charAt(i);
//console.log("===="+s);
}else{
if(s){
arr.push(s);
s = "";
//console.log(s);
}
};
};
if(s){
arr.push(s);
s = "";
};
console.log(arr);
/*
var arr = str.match(/\d+/g);
console.log(arr);*/
/*
* 正则相当于规则
* 1: 定义变量等于双斜杠
* 2: 正则在双斜杠中间
*
* */
/* var str = "瓜皮吃瓜皮";
var reg = /瓜/;
console.log(reg.test(str));//匹配成功就是true , 失败是false
*/
/* var num = "121121abcde333";
var x = "abcde";
var reg1 = /x/;//错误,会被当成需要匹配的字符
var reg2 = new RegExp(x);
console.log(reg2.test(num));*/
/*
* 转义符: \
* 所有在正则里面有特殊意义的字符,需要匹配这些字符的时候要转义
*
* */
/* var str1 = /\\/; // \
var str2 = /\//; // /
var str3 = "因为老师说:\"不认真听课的就会被打屁股\""; // ""*/
/*
* 转义符加上一些特定的字母,有特定的意思
* \d 数字
* \D 非数字
*
* \s 空格
* \S 非空格
*
* \w 字符(字母 数字 下划线)
* \W 非字符
*
* \b 独立的部分
* \B 非独立部分
*
* */
/* var str = "121立定,瓜皮";
var r = /\d/; //匹配数字
alert(r.test(str));*/
/*
var str1 = "121 立定";
var r = /\s/;
alert(r.test(str1));*/
/* var str = "hot-dog_hahahah";//匹配连词符,前后都有中划线(除了下划线之外),或者前后独立(有空格)
var r = /\bdog\b/;
alert(r.test(str));*/
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键字,关键词">
<meta name="Description" content="描述和简介">
<title>Title</title>
<style type="text/css">
*{margin:0;padding:0;}
body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
a{text-decoration:none;}
img{border:none;}
ol,ul{list-style:none;}
</style>
</head>
<body>
<div id="box"></div>
<script>
/*
* 标识:
* i 不区分大小写
* g 全局匹配
* m 换行匹配
* */
/* var str = "ABCDefg";
var r = /Abc/i;
alert(r.test(str));*/
/*
var str = "对面有个哑巴,手里捏着蛤蟆...哑巴";
var r = /哑巴/g;//全部都匹配上
console.log(r.test(str));*/
/* var str = "哈哈哈哈哈哈嘿哈哈哈哈哈";
var r = /嘿/m;
alert(r.test(str));*/
/*
* 方法:
* 字符串.match(正则);匹配成功返回数组,否则返回null
* 字符串.search(正则);匹配成功,返回对应第一次出现的下标,失败返回-1
* */
/* var str = "哈哈哈凌薇专治不听话的瓜皮,凌薇不打好瓜皮";
var r1 = /凌薇/; //匹配一个凌薇
var r2 = /凌薇/g;//匹配所有的凌薇
console.log(str.search(r2))*/
/*
* 量词:
* 个数不确定的时候,用量词 {}
* {2,6} 2<=n<=6 最少2 最多6
* {2} n=2 必须等于2
* {1,} n >= 1 大于等于1
*
* */
/* var str = "1步23333步1444步233步,是魔鬼的步伐";
var r = /\d{1,3}/g;
console.log(str.match(r));*/
/*
* 几个特殊的量词有专门的符号表示
* {1,} + 最少一位,没有上限
* {0,1} ? 没有或者只有一位
* {0,} * 有没有都可以
*
* */
/* var str = "123hahahah456heheheh";
//var r = /\d+/g;
//var r = /\d?/g;
var r = /\d* /g;
console.log(str.match(r));*/
/*
* 字符集
* 代表一个范围: [a-z] [A-Z] [0-9] 还有汉字范围
* */
/* var str = "9090g";
//var r = /[ab]/; //a 或者 b
//var r = /[a-h]/; //匹配在这个范围之内的
alert(r.test(str));*/
/*
* 除了....之外 [^]
*
* */
/* var str = "hahahah demo";
var r = /[^hahahah]/;//除了hahahah(在开头)之外,搜索为true
alert(r.test(str));*/
/*
* 子项 () 将一个字符串拆分,展示多个子项,括号对本身没有什么影响
*
* 全局或者 |
*
* 子项或者 (将或者控制在子项之内)
* */
/* var str = "大家说:凌薇温柔大方!";
var r = /(温柔)/;
console.log(str.match(r));*/
/*var str = "凌薇";
var r = /凌薇老师|凌薇/;//匹配 凌薇老师 或者 凌薇
console.log(str.match(r))*/
var str = "宝宝呀";
var r = /宝宝(老师|呀)/;
console.log(str.match(r))
</script>
</body>
</html>
. 是匹配所有字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键字,关键词">
<meta name="Description" content="描述和简介">
<title>Title</title>
<style type="text/css">
*{margin:0;padding:0;}
body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
a{text-decoration:none;}
img{border:none;}
ol,ul{list-style:none;}
</style>
</head>
<body>
<div id="box"></div>
<script>
/*
* 补充:
* 标识
* 转义
* */
/*
var str = "abcdef";
var r1 = /abc/i;
var r2 = new RegExp("abc" , "i");//第二个参数为标识
alert(r2.test(str));
*/
/* var r = /\d/;
var r2 = /\\d/;
var r3 = new RegExp("\\d");//里面两个反斜杠,一个斜杠本身就是在做转义
var a = "\\d";
var r4 = new RegExp(a);*/
/*
* 有特殊意义的符号
* ^ 起始位置
* $ 结束位置
* . 匹配所有的字符(不匹配 \n \r)
* */
/*
* 例: 验证QQ 是否正确,条件: 第一位不能为0,只能是数字组成,长度在5-10
*
* */
/* var str = "23456789";
//var r = /^[^0]\d{4,9}/;//排除了0以外的其他字符都是true
var r = /^[1-9]\d{4,9}$/;
console.log(r.test(str));*/
/* var str = "哈哈哈哈哈哈.gh.";
var r = /\./;
alert(r.test(str));*/
/*
* 总结:
* 转义: \ /
* 量词: {} + * ?
* 字符集: [^ -] ^ $ .
* 子项: ( | )
* 或者: |
*
* */
/*
* replace:
* 在字符串中用一些字符替换另一些字符,或者替换一个与正则表达式匹配的子串
*
* */
/* var str = "大白同学很棒!国东同学很瓜皮";
var r = /大白/g;
var r2 = /国东/;
//alert(str.replace(r , "刘智"));
alert(str.replace(r2 , "lweiwei"));*/
/*
* split
* 按照指定的字符(串)或者正则去分割某个字符串,结果以字符串数组的形式返回
* */
/*
var str = "曾凯同学22,你的蛙回来了吗?44曾凯?";
var r = /曾凯/g;
//console.log(str.split(r));
//console.log(str.split(/曾凯/));
//console.log(str.split(/\d/));
*/
</script>
</body>
</html>
脏字检查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键字,关键词">
<meta name="Description" content="描述和简介">
<title>Title</title>
<style type="text/css">
*{margin:0;padding:0;}
body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
a{text-decoration:none;}
img{border:none;}
ol,ul{list-style:none;}
.wrap{
width: 400px;
height: 400px;
background: pink;
}
</style>
</head>
<body>
<div id="box">
<input type="text" id="inp">
<input type="button" id="btn" value="发送">
<div class="wrap"></div>
</div>
<script>
var oInp = document.getElementById("inp");
var oBtn = document.getElementById("btn");
var oWrap = document.querySelector("#box .wrap");
//var r = /sb|傻逼|你算哪块小饼干|卧槽/;
var r = /s.{0,2}b|傻.{0,2}逼|卧.{0,2}槽/g;
oBtn.onclick = function (){
var val = oInp.value;
if(val){
/*val = val.replace(r , "**");
//console.log(val);*/
val = val.replace(r , function (s){
//console.log(s);//s表示匹配的脏话
var xx = "";
for(var i = 0; i < s.length; i++){
xx += "*";
};
return xx;
})
};
var oP = document.createElement("p");
oP.innerHTML = val;
oWrap.appendChild(oP);
oInp.value = "";
};
</script>
</body>
</html>
常用的正则匹配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键字,关键词">
<meta name="Description" content="描述和简介">
<title>Title</title>
<style type="text/css">
*{margin:0;padding:0;}
body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
a{text-decoration:none;}
img{border:none;}
ol,ul{list-style:none;}
</style>
</head>
<body>
<div id="box"></div>
<script>
var reg = {
qq : /^[1-9]\d{4,9}$]/,//第一位非0的数字,除了第一位,还有4-9位
tel : /^1[3-8]\d{9}$/,//第一位是1,第二位是3至8之间的数字,除了第一位和第二位,还有9位
mail : /\w+@[\da-z]{2,}(\.[a-z]{2,}){1,3}$/i,
IDCard : /^[1-9]\d{16}[\dxX]$/,
user : /^[a-z_]\w{5,17}$/i,
pwd : /^[\w!@#\$%\^&\*\(\)_\+\}\{\|":\?><\\\.\]]\/]{6,18}$/
};
var str = "431022199911170029";
alert(reg.IDCard.test(str));
</script>
</body>
</html>