您的位置：首页 > Web前端 > JavaScript
JavaScript正则表达式入门

2012-01-10 20:11 399 查看
View Code
<html>
<head>
<TITLE>检查双字符</TITLE>
<script language=javaScript>
//一下例子摘抄自http://www.iteye.com/topic/940835
//如果 match 方法没有找到匹配，返回 null。如果找到匹配返回一个数组并且更新全局 RegExp 对象的属性以反映匹配结果。
function testMatch(){
var toMatch = "a bat, a cat, a fAt baT, a faT cat";
var regexp = /at/gi;
var array = toMatch.match(regexp);
alert(array.length);
for(var i =0; i < array.length; i++){
alert(array[i]);
}
}

function testExec(){
var toMarch7 = "1 3 4 5";
var regExp7 = /(\d+)\s*(\d+)/g;
var result7
while((result7= regExp7.exec(toMarch7)) !=null){
alert(result7);//分别为1 3,1,3 和 4 5,4,5
alert(regExp7.lastIndex);//分别为3和7
}
}

//如果找到一个匹配，search 方法将返回一个整数值，指明这个匹配距离字符串开始的偏移位置。如果没有找到匹配，则返回 -1。
function SearchDemo(){
var r, re;                   // 声明变量。
var s = "The rain in Spain falls mainly in the plain.";
re = /falls/i;            // 创建正则表达式模式。
r = s.search(re);            // 查找字符串。
alert(r);
}

function testReplace(){
var sToChange = "The sky is red";
alert(sToChange);
var reRed = /red/;
var result = sToChange.replace(reRed,"blue");    //输出The sky is blue
alert(result);
}

function testSpilte(){
var sColor = "red, blue, yellow";
var reExp = /\,/;
var arrs = sColor.split(reExp);
//得到一个数组["red","blue","yellow"]
for(var i = 0; i < arrs.length; i++){
alert(arrs[i]);
}
}

function testScope(){
var toMatch = "a bat, a cat, a fAt baT, a faT cat";
var reg = /[bcf]at/gi ;
var arrs = toMatch.match(reg);
//返回的数组["bat", "Cat", "fAt", "baT", "faT", "cat"]
for(var i = 0; i < arrs.length; i++){
alert(arrs[i]);
}
}

function testLogic(){
var toMarch4 = "dog";
var toMarch5 = "cat";
var regExp4 = /dog|cat/;
alert(regExp4.test(toMarch4));//true
alert(regExp4.test(toMarch5));//true
}
/*
replacement 既可以是一个替换的字符串,也可以是一个function
如果是function的情况, 这个function会为每一个匹配执行一次,这个function的返回值作为最终替换的字符串.
*/
function testOrReplace(){
var userInput = "badWord1asdasdandBadWord2";
var toMarch6 = /badword1|badword2/gi;
var newStr = userInput.replace(toMarch6, function(march){
return march.replace(/./g,"*");
});
alert(newStr);
}

//将&替换为&，将'替换为'
function SDReplaceData()
{
var objStr = "huang&bi'ao";
var temp = objStr.replace( /(\&|\')/g,
function($0, $1)
{
return{
"&" : "&",
"'" : "'"
}[$1];
}
);
alert(temp);
}

function getAllWord(){
var toMarch5 = "First Second Third Fourth Fifth Sixth";
var regExp5 = /\b(\S+?)\b/g ; //或者 /\b(\S+)\b/g 和 /(\w+)/g
var arrs = toMarch5.match(regExp5);
//First Second Third Fourth Fifth Sixth
for(var i = 0; i < arrs.length; i++){
alert(arrs[i]);
}

}

function checkNumber(){
var pid = /\d{15}|\d{18}/;//身份证
var mphone = /\d{11}/;//手机号码
var phone = /\d{3,4}-\d{7,8}/;//电话号码

if(mphone.test("13893939392")){
alert("这是手机号码");
}//true
if(phone.test("010-99392333")){
alert("这是座机号码");
}//true
if(phone.test("0771-3993923")){
alert("这是座机号码");
}//true
if(pid.test("33302222222220511X")){
alert("这是身份证号码");
}
}

//多行匹配
function oneMoreLine(){
var pattern = /^javascript/;
alert(pattern.test("java\njavascript"));//false
pattern = /^javascript/m;  //多行搜索开关(重定义^与$的意义)
alert(pattern.test("java\njavascript"));//true
}

/*前瞻:
表示当某个特定的字符分组出现在另一个字符串之前时才去捕获它.
前瞻分正向前瞻 和负向前瞻 , 正向前瞻检查的是接下来出现的是不是某个特定的字符集. 而负向前瞻则是检查接下来的不应该出现的特定字符集.
正向前瞻需要将模式放在(?= 和 ) 之间,注意这不是分组,虽然它也用到括号. 负向前瞻需要将模式放在(!= 和 ) 之间.
*/
function testForward(){
var toMarch1 = "bedroom";
var toMarch2 = "bedding";
var bedReg = /(bed(?=room))/;
var bedReg2 = /(bed(!=room))/;
alert("正向匹配 ： " + bedReg.test(toMarch1)); //true
alert("负向匹配 ： " + bedReg2.test(toMarch1));
//bed,bed 因此这个正则表达式返回的第一个匹配是bed,而不是bedroom,但是它只会去匹配后面跟着 room的bed,有点搞
alert(bedReg.exec(toMarch1));
alert(RegExp.$1); //bed
alert(bedReg.test(toMarch2)); //false
}

/*
非捕获分组：将子表达式放在“?:”符号后，并使用()括起来构成
捕获分组：如果使用普通的()是捕获性质的分组，它匹配的结果会被记录下来，耗费较多的时间
根据环境到底是使用捕获性质的分组还是非捕获性质的分组
*/
function testUncapture(){
var regExp = /huang(?:biao)/gi;
var str = "adsjlfjdhuangbiaodfas";
var arrs = str.match(regExp);
for(var i = 0; i < arrs.length; i++){
alert(arrs[i]);
}
}

function testUncapture2(){
var str="img1.jpg,img2.gif,img3.bmp";
var reg = /(?:\w*)(?=\.gif)/;
var result = str.match(reg);
alert(result);
}
</script>
<link rel="stylesheet" href="../style.css"></head>
<body >

<input type="button" value="match方法" onClick="testMatch()"><br>
<input type="button" value="exec方法" onClick="testExec()"><br>
<input type="button" value="SearchDemo方法" onClick="SearchDemo()"><br>
<input type="button" value="Replace方法" onClick="testReplace()"><br>
<input type="button" value="Spilte方法" onClick="testSpilte()"><br>
<input type="button" value="取值范围" onClick="testScope()"><br>
<input type="button" value="并集" onClick="testLogic()"><br>
<input type="button" value="function替换" onClick="testOrReplace()"><br>
<input type="button" value="JSON替换" onClick="SDReplaceData()"><br>
<input type="button" value="得到所有的单词" onClick="getAllWord()"><br>
<input type="button" value="检查数字" onClick="checkNumber()"><br>
<input type="button" value="多行匹配" onClick="oneMoreLine()"><br>
<input type="button" value="前瞻" onClick="testForward()"><br>
<input type="button" value="非捕获分组" onClick="testUncapture()"><br>
<input type="button" value="前瞻和非捕获分组" onClick="testUncapture2()"><br>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航