一. 正则表达式创建的方式
<title>创建的方式</title>
<script type="text/javascript">
/* var arr=new Array("a","b","c");
var arr1=["a","b","c"]; */
//
var Reg1=new RegExp(/\d/); //对象 \d 数字 digital
var Reg2=/\w/; //字面量 \w 数字 字母 下划线
var str="hell4o world";
var b=Reg1.test(str); //false 只要内容中有规范的内容就会返回true
var b2=Reg2.test("%"); //
if(b2){
alert("填写规范!");
}else{
alert("输入格式有误!");
}
</script>
</head>
<body>
二.正则的组成分析
<script type="text/javascript">
/*
几个部分:
1.规则样式
1.1固定
1.2自定义的
格式:/规则/
2.量词
3.边界
*/
var Reg1=new RegExp(/\d/); //对象 \d 数字 digital
var Reg2=/\w/; //字面量 \w 数字 字母 下划线
var Reg3=/\s/; // \s 匹配的是空字符 space键盘 一个或者多个空格
/*alert(Reg1.test("hello world4"));//true
alert(Reg2.test("&*()")); //false
alert(Reg3.test("helloworld")); //false
*/
//自定义的格则
var Reg4=/hello/i; //匹配字符里面包含hello字符的字符串 i忽略大小写
alert(Reg4.test("hello world "));//true
var Reg5=/@/;
alert(Reg5.test("123@hello world"));//包含@符号都可以
</script>
1.规则样式
1.1 固定
1.2 自定义的
2.量词
3.边界
三.优先级
<title>优先级问题</title>
<script type="text/javascript">
//正则优先级 | 或 优先级最低 ()优先级最高
var Reg1=/foot/;
//alert(Reg1.test("foot"));//true
//alert(/boot/.test("foot"));//false
//alert(/foot|boot/.test("foot")); //true
//alert(/foot|boot/.test("boot")); //true
//比较规范
//alert(/(foot)|(boot)/.test("foot"));
//alert(/(foot)|(boot)/.test("boot"));
//最简便的
//alert(/(f)|(b)oot/.test("foot"));
//alert(/(f)|(b)oot/.test("boot"));
//界定符 [] 检测包含字符的一个
//问题:检测几个字符范围的一个
//alert(/[abc]/.test("a")); //true
//alert(/[abc]/.test("b")); //true
//alert(/[abc]/.test("c")); //true
//alert(/[abc]/.test("abc")); //true
//alert(/[abc]/.test("d")); //false
//引申为范围
//alert(/[0-9]/.test("hello"));//false
//alert(/[0-9]/.test("hello8"));//true
//alert(/[a-z]/.test("hello8"));//a-z小写字母 true
//alert(/[A-Z]/.test("hello8"));//A-Z大写字母 false
//alert(/[0-9a-zA-Z]/.test("hello world"));//包含字母数字 true
//引申取反 [^]取反 除了里面包含的其他内容
//alert(/[^abc]/.test("ABC"));
//位置(定位) ^开头 $结尾
//alert(/^hello/.test("world hello")); //匹配以hello开头的内容 false
//alert(/^hello/.test("hello world"));//匹配以hello开头的内容 true
//alert(/^hello$/.test("hello world"));//匹配以hello结尾 的内容 false
//alert(/^hello$/.test("world hello"));//匹配以hello结尾 的内容 false
//定位通常 量词进行使用
/*
量词: 解释 :
* x>=0 出现0次或者多次 大
+ x>=1 出现1次或者多次
? x=0|1 出现0次或者1次 小
*/
//alert(/^a$/.test("a")); //检测a出现一次的字符 true
//alert(/^a$/.test("aaaa")); //检测a出现一次的字符 false
//alert(/^a$/.test("")); //检测a出现一次的字符 false
//量词
/*
alert(/^a*$/.test("a")); //true
alert(/^a*$/.test("aaaaaa")); //true
alert(/^a*$/.test("")); //true
alert(/^a+$/.test("a")); //true
alert(/^a+$/.test("aaaaaa")); //true
alert(/^a+$/.test("")); //false
alert(/^a?$/.test("a")); //true
alert(/^a?$/.test("aaaaaa")); //false
alert(/^a?$/.test("")); //true
*/
//引申量词 {n,m} 意思: n<=x<=m 之间
//alert(/^a{2,5}$/.test("a")); //false
//alert(/^a{2,5}$/.test("aaaaaaa")); //false
//alert(/^a{2,5}$/.test("")); //false
alert(/^a{0,}$/.test("")); //true *
alert(/^a{1,}$/.test("")); //false +
alert(/^a{0,1}$/.test("")); //true ?
//repalce 方法
var str="hello355 world655";
alert(str.replace("world","joe"));
var reg=/\d/g; //数字 g globle 全局 i:忽略大小写
document.write(str.replace(reg,"b"));//(不加g的时候)hellob55 world655 找到一个就替换掉
//hellobbb worldbbb
</script>
或 | 的优先级最低
()的优先级最高
四.验证
<title>验证</title>
<script type="text/javascript">
//验证qq 纯数字 6-11 不能以0开头
var Reg=/^[1-9]\d{5,10}$/;
//邮箱
/*
组成: 数字 字母 下划线 @.
开头:\w
量词,界定
结尾 :\w
*/
var Reg2=/^\w+@\w*\.\w+$/;
//座机号 0+两位数区号+7-8位数字
var reg3 =/^0\d{2}-\d{7,8}$/;
</script>
1.邮箱
var Reg2=/^\w+@\w*\.\w+$/;
2.座机号
//座机号 0+两位数区号+7-8位数字
var reg3 =/^0\d{2}-\d{7,8}$/;
3.QQ
//验证qq 纯数字 6-11 不能以0开头
var Reg=/^[1-9]\d{5,10}$/;
五.EMCA
<title>概念</title>
<style type="text/css">
ul li{
list-style-type: none;
}
</style>
<script type="text/javascript">
/*
EMCA:
dom:文档对象对象模型,标签化成节点
bom:浏览器对象模型
*/
window.οnlοad=function(){ //onload 等网页元素加载完毕采取执行JavaScript代码
//获取节点的几种方式
var obj=document.getElementById("li1");
alert(obj);
var obj2=document.getElementsByTagName("li")[0];//选择第一个li元素
alert(obj2.length);
var obj3=document.getElementsByName("n1")[0];
alert(obj3);
}
</script>
</head>
<body>
<img alt="" src="./img/IMG_2344.JPG" width="250px" height="200px">
<ul>
<li>张三</li>
<li id="li1">李四</li>
<li>王五</li>
</ul>
<form action="">
兴趣:<input type="checkbox" name="n1" value="1">足球
</form>
</body>
dom:文档对象对象模型,标签化成节点
bom:浏览器对象模型