一、本篇需要用到的方法
对字符串进行操作有许多方法,如:
indexOf()方法,lastIndexOf()方法两者用于查找字符串
substr()方法,复制字符串的一个字串,为了更好的理解和应用正则表达式,本篇会介绍下面的方法,其余的不再赘述。
replace()方法:
该方法在字符串中搜索字串,当找到匹配的字串后,将其替换为第三个字符串。
用法:字符对象.replace("需要替换的字符串","替换的字符串");
可见,其中包含两个参数。
例一:
<script>
var mystring = "hello world";
var mystring = mystring.replace("world","Boy");
alert(mystring);
</script>
二、正则表达式的认识
1.什么是正则表达式?
(1) 正则表达式是一种定义字符的模式方法,我们可以拆分,查找或替换字符串中与模式字符匹配的内容。
(2)正则表达式是通过RegExp对象来使用的,该对象是JavaScript中的一个内置对象,用于存储检索模式。
2.RegExp对象的创建?
(1)var myRegExp = /模式字符/;
(2)var meRegExp = new RegExp("模式字符");即使用RegExp()构造函数
其中第一种更加简短有效。
3.关于正则表达式的属性字符
属性字符 说明
G 查找所有与模式匹配的子串,而非只找出一个就停止
I 模式不区分大小写
M 多行标志。指定特殊字符可以匹配多行文本和字符串的开始和结束
例二:将指定字符串替换为字符串"aaa".
<script>
var mystring = "paul,Paul,Paula,fffPaul";
var myRegExp = /paul/gi;
mystring = mystring.replace(myRegExp,"aaa");
alert(mystring);
</script>
本例中的文本模式为paul,并且运用了g属性和i属性,因此会查找到字符串中所有的paul,并且不区分字符大小写,然后将这些字符串都变为aaa.
但是这样的话就会产生许多问题,比如说将Paula变成了aaaa,但是实际上我们是不想改变Paula的
4.正则表达式的方法
(1)test()方法
用于检索字符串中的指定值,满足返回true,反之返回false.
例三:
<script>
var Input = prompt("请输入","");
function create(tii)
{
var myRegExp = /[a-z]/i;
return(myRegExp.test(tii));
}
if(create(Input))
{
alert("输入正确");
}else{
alert("您输入的具有无效字符");
}
//正则表达式的小例子
</script>
此处create()函数的返回值为后面的if提供了条件,要是输入的都是字母,则返回true,反之,则返回false.
(2)exec()方法
用于检索字符串中的指定值,返回值为被找到的值,要是没有找到,则返回null.
例四:
<script>
var myRegExp = /l/;
document.write(myRegExp.exec("hellohello"));
</script>
网页上写入的是字母l,由此可见,它只会返回第一个找到的字符串然后就停止,那要是想返回所有的l呢?
例五:
<script>
var patt1=new RegExp("l","g");
do
{
result=patt1.exec("hellohello");
document.write(result);
}while (result!=null)
</script>
需要注意的是:带有g参数和没有带参数的返回值都是一个数组,只不过没有带g参数的exec()方法在数组的第一个元素存着匹配的字符串。
5.正则表达式---特殊字符
(1)文本,数字和标点符号
字符类 匹配的字符 实例
\d 0~9的数字 \d\d---匹配11
\D 任何非数字字符 \D\D\D不会匹配123
\w 任何A~Z,a~z,0~9,以及下划线_ \w\w\w---匹配aB_
\W 任何非单词字符 \W匹配@
\s 任何空白字符 \s与制表符、回车符、换页符
\S 任何非空白字符 \S不与制表符、回车符、换页符相匹配
. 除换行符(\n)之外的任意单个字符 .匹配@,1,a
[...] 匹配出位于方括号之内的字符 [123]匹配1,2,3,不匹配其他
[^...] 匹配除方括号内的所有字符 [^abc]匹配除a,b,c之外的任何字符
例如:要匹配一个8位的学号:\d\d\d\d\d\d\d\d.
但是我们不难发现,要是数字更加多的话,要写的\d的就更多,也就更麻烦,所以就有了重复字符。
(2)重复字符
正则表达式包含重复字符,用来指定要匹配多少个后一项或者字符,这样就会减少很多麻烦。
特殊字符 含义 实例
{n} 前一项出现n次 x{2}与xx相匹配
{n,} 前一项出现n次,或者出现n次以上 x{2,}与xx,xxx,xxxx等相匹配
{n,m} 前一项至少出现n次,最多出现m次 x{2,4}与xx,xxx,xxxx相匹配
? 前一项出现0次或者1次 x?与空串或者x相匹配
+ 前一项出现1次或者多次 x+与x,xx,xxx等相匹配
* 前一项出现0次或者多次 x*与空串,x,xx,xxx等相匹配
则上面的学号可以写为\d{8}.
(3)位置字符
位置字符 描述
^ 匹配的是字符的开头,在多行检索中,匹配的是一行的开头
$ 匹配的是字符的结尾,在多行检索中,匹配的是一行的结尾
\b 匹配单词分界位置,即单词字符与非单词字符之间的位置
\B 匹配非单词分界位置
例六:
<script>
var mystring = "hello,hey,girl,world.";
var myRegExp = /\b/g;
mystring = mystring.replace(myRegExp,"*");
alert(mystring);
</script>
网页中弹出的结果为:*hello*,*hey*,*girl*,*world*.
由此可见,任何数字,字母,下划线字符之间的位置以及任何非单词字符都是单词分界,需要注意的是字符串的开始或结束位置也都是单词分界。
例七:在例二的基础上,我们来看看例四
<script>
var mystring = "paul,Paul,Paula,fffPaul";
var myRegExp = /\bpaul\b/gi;
mystring = mystring.replace(myRegExp,"boy");
alert(mystring);
</script>
网页弹出的结果是:boy,boy,Paula,fffPaul.
由此可见,这样运用位置字符,就能很好的确定替换的字符。
(5)正则表达式广泛应用于表单的验证,用于指出用户输入的错误,一个小例子:
例八:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>login</title>
<style>
*{
margin:0px;
padding:0px;
}
body{
background-color:#E7EEF4;
position:relative;
}
.big{
width:95%;
height:1000px;
/*background-color: white;*/
margin:auto;
}
.head{
width:100%;
height:7.5%;
background-color:white;
margin: auto;
text-align:center;
line-height:75px;
border:1px solid lightblue;
border-radius:30px;
}
.head h1{
font-size:30px;
font-family:楷体;
}
.picture{
width:35%;
height:50%;
/*background-color: yellow;*/
margin-left:10%;
margin-top:15%;
}
.middle{
width:25%;
height:60%;
position:absolute;
background-color: white;
left:50%;
top:30%;
}
.link{
width:65%;
height:7%;
margin-top:10%;
border-color:lightblue;
margin-left:14%;
font-size:20px;
}
.same{
width:33%;
height:8%;
margin-top: 5%;
margin-left:30%;
font-size:22px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="big">
<div class="head">
<h1>
小星星网站---登录
</h1>
</div>
<div class="middle">
<input type="text" value="账号" class="link" id="admin"/>
<br/>
<input type="password" class="link" id="pass"/>
<br/>
<input type="submit" value="登录" class="link" οnclick="bigReg()" style="width:33%;margin-left:30%;background-color: lightblue;">
<br/>
<input type="submit" value="微信登录" class="same" style="margin-top:30%;">
<br/>
<input type="submit" value="QQ登录" class="same">
</div>
<div class="picture">
<img src="img/katoo.png" width="100%"/>
</div>
</div>
<script>
function bigReg()
{
var zhanghao = document.getElementById("admin").value;
var mima = document.getElementById("pass").value;
function oneReg(yanzheng)
{
var myRegExp = /\d{10}/;
return(myRegExp.test(yanzheng));
}
if(oneReg(zhanghao))
{
if(zhanghao.length==10)
alert("输入正确");
else
alert("数字是10位哦");
}
else
{
alert("您只能输入10位数字哦");
}
}
</script>
</body>
</html>
为了样式的明显,此处简单制作了一个表单,其中登录时规定了账号为10位数字,当用户账号输入有错时,网页会弹出错误。