正则表达式
1.正则表达式基础(1)
复习字符串操作
•search 查找
var str='abcdef'; alert(str.search('g')); //返回要查找的字符串第一次出现的位置，没有返回-1
•substring 获取子字符串
var str='abcdef'; //alert(str.substring(1, 4));包含起始位置终止位置不包括 alert(str.substring(1));
•charAt 获取某个字符
var str='abcdef'; alert(str.charAt(2));
•split 分割字符串，获得数组
var str='abc-12-u-qw'; var arr=str.split('-');//分隔 alert(arr[0]);
找出字符串中的所有数字
•用传统字符串操作完成
<script> var str='12,87 76 -ddf e dd 89 ff76 9'; var arr=[]; var tmp=''; var i=0; for(i=0;i<str.length;i++) { if(str.charAt(i)>='0' && str.charAt(i)<='9') { tmp+=str.charAt(i); } else { if(tmp) { arr.push(tmp); tmp=''; } } } if(tmp) { arr.push(tmp); tmp=''; } alert(arr); </script>
•用正则表达式完成
<script> var str='12,87 76 -ddf e dd 89 ff76 9'; var re=/\d+/g; alert(str.match(re)); </script>
2.正则表达式基础(2)
什么是正则表达式
•什么叫“正则”
–规则、模式
•强大的字符串匹配工具
•是一种正常人类很难读懂的文字
RegExp对象
•JS风格——new RegExp(“a”, “i”)
•perl风格——/a/i
var str='abcdef'; //var re=new RegExp('a', 'i');//i 忽略大小写 var re=/a/i; //简写 alert(re.test(str));//ture
3.字符串与正则配合(1)
search
•字符串搜索
–返回出现的位置
var str='asdf 443 vczxv 55'; var re=/\d/; // \d 全称digital 数字 alert(str.search(re)); //5 就是在第五个位置
–忽略大小写：i——ignore
–判断浏览器类型
//alert(window.navigator.userAgent);浏览器版本 if(window.navigator.userAgent.search(/firefox/i)!=-1) { alert('ff'); } else if(window.navigator.userAgent.search(/chrome/i)!=-1) { alert('chrome'); } else if(window.navigator.userAgent.search(/msie 9/i)!=-1) { alert('IE9'); }
match
•获取匹配的项目
–量词：+
–量词变化：\d、\d\d和\d+
–全局匹配：g——global
例子：找出所有数字
var str='sdf e443 fedef 55 66gg 333322312 dff 99'; var re=/\d+/g; // \d 数字 +量词许多任意长度 alert(str.match(re));//match 匹配
4.字符串与正则配合(2)
replace
•替换所有匹配
–返回替换后的字符串
var str='abacdAef'; alert(str.replace(/a/gi, 'T'));//找a 替换成T gi 全局找忽略大小写
–例子：敏感词过滤
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> window.onload=function () { var oTxt1=document.getElementById('txt1'); var oTxt2=document.getElementById('txt2'); var oBtn=document.getElementById('btn1'); oBtn.onclick=function () { var re=/我们|你们|他们/g; // |或 oTxt2.value=oTxt1.value.replace(re, '***'); }; }; </script> </head> <body> 转换前<textarea id="txt1" rows="10" cols="40"></textarea><br /> <input id="btn1" type="button" value="过滤" /><br /> 转换后<textarea id="txt2" rows="10" cols="40"></textarea> </body> </html>
5、字符类(1)
任意字符
•[abc]
–例子：o[usb]t——obt、ost、out
范围
•[a-z]、[0-9]
–例子：id[0-9]——id0、id5
排除
•[^a]
–例子：o[^0-9]t——oat、o?t、o t
var str='1b2 abc 1c2 ee'; //或者 var re=/1[abc]2/g; //1[abc]2 1和2之间可以出现abc // [] 或者 出现在方括号里面都可以出现[0-9][a-z][0-9a-z] // /d即是0-9的简称 // [^a] 除了a之外的所有 //var re=/1a2|1b2|1c2/; alert(str.match(re));
组合
•[a-z0-9A-Z]
实例：偷小说
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> window.onload=function () { var oTxt1=document.getElementById('txt1'); var oTxt2=document.getElementById('txt2'); var oBtn=document.getElementById('btn1'); oBtn.onclick=function () { var re=/<[^<>]+>/g;
/* <[^<>]+> 查找<>中间的 除<>本身之外的所有 + 所有*/
oTxt2.value=oTxt1.value.replace(re, ''); }; }; </script> </head> <body> <textarea id="txt1" rows="10" cols="40"></textarea> <input id="btn1" type="button" value="转换" /> <textarea id="txt2" rows="10" cols="40"></textarea> </body> </html>
•过滤HTML标签
–自定义innerText方法
转义字符
•.（点）——任意字符
•\d、\w、\s
•\D、\W、\S 非和小写相反
\d 数字
\w word 数字字母下滑线
\s space 空白
\D 非数字
var str=' fd rr erre fff '; alert(str.replace(/\s+/g, ''));
6.量词
什么是量词
•出现的次数
•{n,m}，至少出现n次，最多m次
•例子：查找QQ号
var str='我的QQ是：258344567，你的是4487773吗？'; var re=/[1-9]\d{4,10}/g; // 第一位1-9的数字后面跟4-10位的数字 \d{4,10} 4-10位的数字 alert(str.match(re));
常用量词
•{n,} 至少n次
•* 任意次 {0,}
•？ 零次或一次 {0,1}
•+ 一次或任意次{1,}
•{n} 正好n次
7、常用正则例子
高级表单校验
•校验邮箱
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> //邮箱规则 // 一串字母 数字 下划线 @ 一串英文 数字 . 一串英文（长度是2-4） // \w+ @ [a-z0-9]+ \. [a-z]{2-4} // \w+@ [a-z0-9]+\.[a-z]{2-4} //^行首 $ s行尾 做校验行的东西都要加行首行尾 window.onload=function () { var oTxt=document.getElementById('txt1'); var oBtn=document.getElementById('btn1'); oBtn.onclick=function () { var re=/^\w+@[a-z0-9]+\.[a-z]{2,4}$/; if(re.test(oTxt.value)) { alert('对了'); } else { alert('你写错了'); } }; }; </script> </head> <body> <input id="txt1" type="text" /> <input id="btn1" type="button" value="校验" /> </body> </html>
–行首行尾 ^ $
–去除空格：^\s*|\s*$
var str=' ffe ww ee fewf '; var re=/^\s+|\s+$/g; alert('('+str.replace(re, '')+')');
•匹配中文：[\u4e00-\u9fa5] 这是uf8编码
var str='asdfb 34 +_=45 '; var re=/[\u4e00-\u9fa5]/; alert(re.test(str));
•完美版getByClass
–单词边界：\b
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> function getByClass(oParent, sClass) { var aEle=oParent.getElementsByTagName('*'); var aResult=[]; var re=new RegExp('\\b'+sClass+'\\b', 'i'); var i=0; for(i=0;i<aEle.length;i++) { //if(aEle[i].className==sClass) //if(aEle[i].className.search(sClass)!=-1) if(re.test(aEle[i].className)) { aResult.push(aEle[i]); } } return aResult; } window.onload=function () { var oUl=document.getElementById('ul1'); var aBox=getByClass(oUl, 'box'); var i=0; for(i=0;i<aBox.length;i++) { aBox[i].style.background='red'; } }; </script> </head> <body> <ul id="ul1"> <li></li> <li class="box active"></li> <li class="box"></li> <li></li> <li></li> <li class="box"></li> </ul> </body> </html>
总结
1、字符串操作包括哪些？举例说明
2、什么是正则表达式？如何创建正则对象？
3、正则有几种选项？分别是什么意思？
4、search、match、replace是做什么的？怎么用？
5、字符类（[]）包括几种情况？
6、正则有哪些转义字符？分别是什么意思？
7、什么是量词？各个量词分别有什么作用？
8、举几个正则表达式的例子，比如：邮件、中文等
