入门正则表达式

前端之家收集整理的这篇文章主要介绍了入门正则表达式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

正则表达式的web开发中的常见场合

1:邮箱验证

2:用户名验证

3:替换字符串某一部分

4:信息采集,用来分析有效的代码

.....

正则表达式:规则表达式

"一种有规律的字符串的描述"

正则表达式是一门独立的知识,同样的一段描述,比如,对于email的匹配表达式,

在不同语言是一样的,但是,调用函数可能不一样.

学习正则表达式

1:js,如果写一个正则表达式,"/正则表达式/"(不含双引号)

2:js,用正则表达来验证字符串是否满足,可以用reg.test(String);//验证

3: js,用正则表达式的.exec函数,用来查找匹配的选项,并把查到的值取出.//查找

4:字符串应用正则,

string.match(reg),正则查找字符串

string.search(reg),正则查找位置

string.replace(reg,'newstr');正则替换

String.split(reg);正则拆分


正则表达式3句话

1:要找什么字符?

2:从哪儿找?

3:找几个?

1.要找什么字符?

1.1字面值,"hi",就是找"hi"

1.2字符集合来表示,[abcd],指匹配abcd中的任意一个

1.3用范围来表示字符[0-9],[a-z][A-Z]

1.4字符""(就是系统为常用的字符集合创建的一个简写)

:\d---->[0-9],\w--->[0-9a-zA-Z_],\s------->[\t\v\f\r\n](空白符)

1.5补集的形式来表示字符集合.

:[0-9]===>[^0-9],[abcef]===>[^abcef]

对于字符簇,只需把字母大写,即可表示补集

[\d]====>[\D],[\w]===>[\W],[\s]==>[\S](非空白字符)

1.6"."代表"任意字符,包括换行符"

2:从哪儿找,找到哪儿?

2.1\b,====>'单词边界'

\bhi===>从单词的边界开始匹配,hi

2.2\B===>单词的非边界,把单词中间的某一部分取出来

把中间含有hi的单词取出,hi不能在两端

2.3^caret,"字符串的起始位置开始匹配",

2.4$,匹配到字符串的结束位置

3:找多少

*:0--->N===>等价{0,}

+:[1,N]====>等价{1,}

?:[0,1]====>等价{0,1}

a{n}:字符a准确的出现n

a{n,}:字符a至少出现次

a{n,m},n-->m

个数修饰符默认是贪婪模式,尽量多找

"个数修饰符后面加?",则为非贪婪模式,尽量少的找.

模式:

以匹配为例,默认情况,match找到一次就结束,

能否告诉匹配过程,一直找,在全文范围内一直找.

g->全局模式,global[找所有的,而不是找一次结束]

i--->忽略大小写ignore

m->多行模式

s-->单行模式(把整个字符串看成一行)(js不支持单行模式)

js,不支持单行的情况下,如何换行?

--->什么样的模式能代表"所有"字符串

==>[\d\D],[\s\S],[\w\W]


<script type="text/javascript">
function t1() {
    var v = document.getElementsByName('str')[0].value;
    var patt = /hi/;
    alert(patt.test(v));
}

function t2(){
    var v = document.getElementsByName('str')[0].value;
    var patt = /^hi$/; // 并不是意味着从字符串的开始处找,而是找字符串的开始标志
    alert(patt.test(v));
}


function t3(){
    var v = document.getElementsByName('str')[0].value;
    var patt = /\bhi\b/; // 并不是意味着从字符串的开始处找,而是找字符串的开始标志
    alert(patt.test(v));
}
</script>

<style type="text/css">
</style>
</head>
    <body>
        <h2>从哪儿找</h2>
        <p>可以从字符串的开始处找,也可以找到字符串的结尾
        也可以从单词的开始或结果处,或单词的非边界<br />
        字符串的开始: ^<br />
        字符串的结尾: $<br />
        单词的边界:\b <br />
        单词的非边界:\B<br />
        </p>
        <input type="text" name="str" /><br />
        <input type="submit" value="字符串中有没有hi字符串" onclick="t1();" /><br />
        <input type="submit" value="字符串就是hi" onclick="t2();" /><br />
        <input type="submit" value="找有没有hi单词" onclick="t3();" /><br />
    </body>
</html>

<script type="text/javascript">
function t1() {
    var v = document.getElementsByName('str')[0].value;
    var patt = /[347]/;
    alert(patt.test(v));
}

function t2() {
    var v = document.getElementsByName('str')[0].value;
    var patt = /[0-9]/;
    alert(patt.test(v));    
}

function t3() {
    var v = document.getElementsByName('str')[0].value;
    var patt = /<p>.<\/p>/;
    alert(patt.test(v));   
}

</script>

<style type="text/css">
</style>
</head>
    <body>
        <h2>找谁</h2>
        <p>
           1:字面值,比如'hi',代表找'hi'<br />
           2:集合来表示[347]<br />
           3:范围,[0-9],[a-z],[A-Z]<br />
           4: "."表示任意单个字符(不包含换行符)
        </p>
        <textarea name="str" /></textarea><br />
        <input type="submit" value="判断手机号有没有3,4,7" onclick="t1();" /><br />
        <input type="submit" value="判断字符串有没有数字" onclick="t2();" /><br />
        <input type="submit" value="任意字符" onclick="t3();" /><br />
    </body>
</html>

<script type="text/javascript">
function t1() {
    var v = document.getElementsByName('str')[0].value;
    var patt = /<p>.{2,3}<\/p>/;
    alert(patt.test(v));
}


function t2() {
    var v = document.getElementsByName('str')[0].value;
    var patt = /<p>.{2}<\/p>/;
    alert(patt.test(v));
}

function t3() {
    var v = document.getElementsByName('str')[0].value;
    var patt = /<p>.{2,}<\/p>/;
    alert(patt.test(v));
}

</script>

<style type="text/css">
</style>
</head>
    <body>
        <h2>找多少个</h2>
        <p>
           1:用数字准确描述,找多少个.<br />
           在要找的字符后面{n,n<m,例{2,3},出现2到3次,n 到m次<br />
           2:只用n,例如{2},表示准确的n次<br />
           3:用{n,},例如{2,表示至少2次,即[2,无穷大]<br />
           4:{0,0->N次,用"*"来简化
           5:{1,1->N次,用"+"来简化
           6:{0,1},0->1次,用"?"来简化

        </p>
        <textarea name="str" /></textarea><br />
        <input type="submit" value="判断P中的字符有2-3个" onclick="t1();" /><br />
        <input type="submit" value="判断P中的字符有2个" onclick="t2();" /><br />
        <input type="submit" value="判断P中的字符xxx" onclick="t3();" /><br />
    </body>
</html>

<script type="text/javascript">
//判断单词中有连续重复的字符
function t1() {
    var v = document.getElementsByName('str')[0].value;
    var tagg=/[a-z]+([a-z])\1+[a-z]+/;
    alert(tagg.test(v));
}
//判断单词是否首尾相同
function t2() {
    var v = document.getElementsByName('str')[0].value;
    var patt =/^([a-z])+[a-z]+\1$/;
    alert(patt.test(v));    
}
</script>

<style type="text/css">
</style>
</head>
    <body>
        <h2>反向引用</h2>
        <p>
           找有连续重复字符的单词,比如 good,piiig,abc<br />
           如果找到一个a,应该紧接着判断,后面还有a,要把a记忆下来,--->反向引用

        </p>
        <textarea name="str" /></textarea><br />
        <input type="submit" value="判断单词中有连续重复的字符" onclick="t1();" /><br />
        <input type="submit" value="判断单词是否首尾相同" onclick="t2();" /><br />
    </body>
</html>

<script type="text/javascript">

/****
在正则的匹配的时候,用\n表示第几个()的内容

在正则替换的时候,用$n来表示第几个()的内容PHP中,无论是匹配还是替换,用\n,和$n都一样.
****/

function t1() {
    var vo = document.getElementsByName('str')[0];
    var patt=/([0-9]{3})[0-9]{4}([0-9]{4})/;
    vo.value=vo.value.replace(patt,"$1****$2");
}   
    
//    var patt = /([0-9]{3})[0-9]{4}([0-9]{4})/;
//    vo.value = vo.value.replace(patt,"$1****$2");


</script>

<style type="text/css">
</style>
</head>
    <body>
        <h2>反向引用替换手机号</h2>
        <p>
           
        </p>
        <textarea name="str" /></textarea><br />
        <input type="submit" value="把手机号中间4位换成*" onclick="t1();" /><br />
    </body>
</html>

猜你在找的正则表达式相关文章