one 正则的初识
// 正则：是一种处理字符串的规则
// 正则匹配：验证当前的字符串是否是符合该规则的子串；
// 正则捕获：获取到符合规则的字符串
正则有两部分组成：元字符，和修饰符
元字符：/里面的符号/
常用到的特殊元字符：
\d: 0~9 任意一个数字;
\D: 非0~9 之间的任意字符;
\w: 字母、数字或下划线 [a-zA-Z0-9_];
\W: 非字母、数字或下划线 [a-zA-Z0-9_]以外的任意字符;
\s: 匹配任意一个空白字符 (包括制表符)
\b: 匹配边界符 比如"hello-world" 中的'-'
\n: 匹配换行字符；
\:转义字符
.:代表除了\n以外的任意字符 \.仅表示一个.
^：以某个字符开头;
$:以某个字符结尾
a|b：a或者b当中的一个
[abc]:a,b,c当中的任意一个
[^abc]:除a,b,c之外的
[a-z]: 表示a到z中任意一个字母
[^a-z]:表示非a到z中任意一个字母
量词元字符
* 出现零到多次 等价于 {0,}
? 出现零到一次 等价于 {0,1}
+ 出现一次到多次 等价于 {1,}
{m} 出现m次
{m,} 出现至少m次
{m,n} 出现m~n次
分组：
(?:) 当前分组只匹配不捕获
(?=) 正向预查
(?!) 反向预查
修饰符 斜杠后面的号
修饰符 i ignoreCase 忽略大小写
g global 全局匹配
m multiline 多行匹配
two 正则的定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<body>
<input type="text" name="" id="oinput">
<button id="btn">验证</button>
</body>
<script type="text/javascript">
//正则的创建
//正则的字面量创建：
var reg = /\d123/g
console.log(typeof reg);
//构造函数创建
var reg2 = new RegExp("\\d","g");
console.log(reg2);
// 通常选用第一种创建方式
var oinput = document.getElementById('oinput');
var btn = document.getElementById('btn');
btn.onclick = function(){
var text = oinput.value;
// 要求文本框输入字母含有x
var regone = /x/;
//必须是一个符号并且是x
var regone = /^x$/;
// 以m开头 至少2个n 最多5个n
var regone = /^mn{2,5}$/;
// 6个5
var regone = /^5{6}$/;
// 邮编
// var regone = /^[0-9]{6}$/;
var regone = /^\d{6}$/;
// 判断用户名 字母 数字 下划线 长度范围6~16
// var regone = /^\w{6,16}$/;
var regone = /^[a-zA-Z_]\w{5,15}$/;
// 至少6位密码
var regone = /^.{6,}$/;
// 要求输入网址必须是 www.sina.com
var regone = /^w{3}\.sina\.com$/
// 要求输入 8+9
var regone = /^8\+9$/;
// 手机号码 以13开头或以15开头
var regone = /^1[35]\d{9}$/;
var regone = /^1(3|5)\d{9}$/;
var regone = /^(13|15)\d{9}$/;
//需要是汉字，出现一次到多次
var regone = /^[\u4e00-\u9fa5]+$/;
//出现的数字范围 18-65之间
var regone = /^(1[89])|([2-5][0-9])|(6[0-5])$/;
alert(regone.test(text));
}
</script>
</html>
three 敏感词过滤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript">
</script>
<style type="text/css">
*{
padding: 0; margin: 0;
}
#edit {
margin: 0 auto;
width: 1000px;
text-align: center;
overflow: hidden;
}
#commentlist {
margin: 0 auto;
width: 1000px;
}
#commentlist .comment{
width: 800px;
min-height: 80px;
margin: 20px auto;
background: darkkhaki;
border-radius: 3px;
position: relative;
overflow: hidden;
}
#commentlist .comment p{
margin: 10px 10px;
}
#sendBtn {
display: block;
margin: 10px auto;
width: 100px;
height : 30px;
line-height: 30px;
background: linear-gradient(to bottom, #faa, #f40);
box-shadow: 0 0 2px #000;
border-radius: 4px;
}
#sendBtn:hover{
cursor: pointer;
background: linear-gradient(to bottom, #fee, #f40);
}
</style>
<body>
<div id="edit">
<p>请输入你的发言:</p>
<p>
<textarea id="contentInput" name="" rows="5" cols="60"></textarea>
</p>
<p><a class="send" id="sendBtn">发送</a></p>
</div>
<div id="commentlist">
<div class="comment" id="comment">
<p>张三疯:</p>
<p style="word-break: break-all;">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
<p style="text-align: right;">2016/9/4 16:06</p>
</div>
</div>
</body>
</html>
<script>
function $(id) {
return document.getElementById(id);
}
var btn = $('sendBtn');
btn.onclick = function(){
var text = $('contentInput').value;
var arr = ['tmd','sb','cnm','nmsl'];
for (var i = 0; i < arr.length; i++) {
var reg = new RegExp(arr[i],'g');
text = text.replace(reg,'*');
}
var commentBox = $('comment').cloneNode(true);
console.log(commentBox);
console.log(commentBox.children);
commentBox.children[1].innerText = text;
commentBox.children[2].innerText = new Date().toLocaleString();
$('commentlist').insertBefore(commentBox,$('commentlist').children[0]);
}
</script>
网友评论