正则表达式

来源：互联网发布：台湾留学生在大陆知乎编辑：程序博客网时间：2024/06/06 03:04

1.复习字符串的操作

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>1.复习字符串操作</title></head><body><script>//search:返回要查找的字符串第一次出现的位置，没有返回-1var str='abcdef';alert(str.search('g'));//没有此字符串返回-1//substring:从起始位置开始到结束位置但不包含结束的值var str='abcdef';alert(str.substring(1, 4));//bcdalert(str.substring(1));//从1开始到结束 bcdef//charAt:获取某个字符alert(str.charAt(2));//c//split:分割字符串，得到数组var str='abc-12-u-qw';var arr=str.split('-');alert(arr[0]);//abc</script></body></html>

2.找出字符串中的所有数字

a)找出字符串中的所有数字(传统方式)

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>2.找出字符串中的所有数字</title></head><body><script type="text/javascript">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></body></html>

b)找出字符串中的所有数字(正则方式)

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>3.找出字符串中的所有数字</title></head><body><script type="text/javascript">var str='12,87 76 -ddf e dd 89 ff76 9';var re=/\d+/g;alert(str.match(re));</script></body></html>

3.正则表达式

a)正则表达式的概念

它是一套JavaScript的规则，模式，是一种强大的字符串匹配工具

b)正则表达式的作用

操作字符串

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>4.正则表达式</title></head><body><script type="text/javascript">var str='abcdefg';var re=new RegExp('a');//检测是否包含a，区分大小写的,i是忽略大小写//perl风格——/a/i等同于new RegExp('a','i')alert(re.test(str));//返回true,该字符串包含a</script></body></html>

c)字符串和正则配合

1）search:字符串搜索，返回出现的位置，忽略大小写:i-ignore

判断浏览器类型

var str='abcdef';alert(str.search(/b/));//1var str='asdf 443 vczxv 55';var re=/\d/;alert(str.search(re));//5

2)search实例UserAgent(判断浏览器的类型)

//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');}

3)Match:获取匹配的项目

量词：+

量词变化：\d、\d\d和\d+

全局匹配：g——global

例子：找出所有数字

var str='sdf e443 fedef  55 66gg 333322312 dff 99';var re=/\d+/g;//其中/g代表全局变量,其中+代表量词alert(str.match(re));

4）replace
 替换所有匹配
 返回替换后的字符串

var str='abacdAef';alert(str.replace(/a/gi, 'T'));

例子：敏感词过滤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, '***');};};

4.字符类

任意字符

[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 tvar str='1b2 abc 1c2 ee';//或者var re=/1[abc]2/g;//var re=/1a2|1b2|1c2/;alert(str.match(re));//1b2,1c2组合[a-z0-9A-Z]

a)实例：偷小说

<!DOCTYPE html><html><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>

b)过滤HTML标签
自定义innerText方法
转义字符
.（点）——任意字符
\d、\w、\s
\D、\W、\S

5.量词

什么是量词
出现的次数
{n,m}，至少出现n次，最多m次
例子：查找QQ号
常用量词
{n,} 至少n次
* 任意次 {0,}
？零次或一次 {0,1}
+ 一次或任意次{1,}
{n} 正好n次

6.常用的正则例子

a)校验邮箱

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>校验邮箱</title><script>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>

b)去掉行首行尾

var str='  ffe ww ee fewf   ';var re=/^\s+|\s+$/g;alert('('+str.replace(re, '')+')');

c)去除空格：^\s*|\s*$

d)匹配中文：[\u4e00-\u9fa5]

var str='asdfb 34 +_=45 ';var re=/[\u4e00-\u9fa5]/;alert(re.test(str));完美版getByClass单词边界：\b<!DOCTYPE html ><html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>完美版getByClass</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>

0 0