Javascript 正则表达式教程

最新推荐文章于 2023-05-08 23:22:05 发布

浮生若梦丶

最新推荐文章于 2023-05-08 23:22:05 发布

阅读量3.1k

点赞数

分类专栏： # js 文章标签：正则表达式 javascript firefox ie user div

js 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

一，概述

1，正则表达式，可以说是任何一种编程语言都提供的机制，它主要是提供了对字符串的处理能力。
2，正则表达式在页面处理中的使用场景：
1）表单验证。验证某些域符合某种规则，例如邮件输入框必须输入的是邮件、联系电话输入框输入的必须是数字等等
2）处理DOM模型。例如通过表达式定位DOM中的一个对象或一系列对象，一个例子就是定位id属性中含有某个特殊字符的div对象。
3）纯编程逻辑。直接用于编程的逻辑之中。
3，说明：本部分所举的正则表达式的代码片断，都是经过测试的，但有一点需要注意，对于换行的字符串的定义，我们在表述时使用的是类似如下的形式：
var str=“It’s is
a beautiful city”；
这种形式直接写在JS代码中是错误的，那如何获取具有换行的字符串呢？简单的办法：在textarea中输入文本并换行，然后将该值赋给JS变量即可。例如：
var str=document.forms[0].mytextarea.value;

二，语法与使用

1，定义正则表达式

1）定义正则表达式有两种形式，一种是普通方式，一种是构造函数方式。
2）普通方式：var reg=/表达式/附加参数
表达式：一个字符串，代表了某种规则，其中可以使用某些特殊字符，来代表特殊的规则，后面会详细说明。
附加参数：用来扩展表达式的含义，目前主要有三个参数：
g：代表可以进行全局匹配。
i：代表不区分大小写匹配。
m：代表可以进行多行匹配。
上面三个参数，可以任意组合，代表复合含义，当然也可以不加参数。
例子：
var reg=/a*b/;
var reg=/abc+f/g;
3）构造函数方式：var reg=new RegExp(“表达式”,”附加参数”);
其中“表达式”与“附加参数”的含义与上面那种定义方式中的含义相同。
例子：
var reg=new RegExp(“a*b”);
var reg=new RegExp(“abc+f”,”g”);
4）普通方式与构造函数方式的区别
普通方式中的表达式必须是一个常量字符串，而构造函数中的表达式可以是常量字符串，也可以是一个js变量，例如根据用户的输入来作为表达式参数等等：
var reg=new RegExp(document.forms[0].exprfiled.value,”g”);

2，表达式模式

1）表达式模式，是指表达式的表达方式与样式，即 var reg=/表达式/附加参数中的“表达式”怎样去描述？
2）从规范上讲，表达式模式分为简单模式和复合模式。
3）简单模式：是指通过普通字符的组合来表达的模式，例如
var reg=/abc0d/;
可见简单模式只能表示具体的匹配。
4）复合模式：是指含有通配符来表达的模式，例如：
var reg=/a+b?/w/;
其中的+、?和/w都属于通配符，代表着特殊的含义。因此复合模式可以表达更为抽象化的逻辑。
下面我们着重说一下复合模式中各个通配符的含义及其使用。
5)复合模式中特殊字符的讲解：

1>/：在许多编程语言里面被用作转义符，一般来说
/符号后面如果跟的是普通字符c，那么/c就代表特殊的含义，例如n本来代表字符n，但/n就代表换行。
/符号后面如果跟的是特殊字符c，那么/c就代表普通字符c，例如/一般用作转义符，但//则调表普通字符/。
Javascript的正则表达式中/的用法与上面相同，只是不同的编程语言，特殊字符表可能不太一样罢了。

2>^：匹配输入字符串的起始端，如果是多行匹配，即表达式的附加参数中含有m，则也在一个换行符后匹配。
例子：/^B/匹配 “Bab Bc ”中的第一个B
例子2：/^B/gm匹配
          “Badd B
          cdaf
          B dsfB”
          中的第一行第一个B，第三行中的第一个B

3>$：匹配输入字符创的尾端，如果是多行匹配，即表达式的附加参数中含有m，则也在一个换行符前匹配。
与^的用法相反。
例子：/t$/匹配“bat”中的t，但是不匹配“hate”中的t
例子2：/t$/匹配
“tag at
bat”
中第一行的最后一个t和第二行的t。

4>*：匹配前一个字符0次或多次。
例子：/ab*/匹配“dddabbbbc”中的“abbbb”，也匹配“ddda”中的“a”

5>+：匹配前一个字符1次或多次。
例子：/ab+/匹配“dddabbbbc”中的“abbbb”，但不匹配“ddda”
与后面的{1,}（原型：{n,}）的用法类似

6>?：?的用法比较特殊，一般来说它用来对前一个字符做0次或1次匹配，但是它有另外两种特殊的用法：
如果紧跟在*、+、?和{ }之后，则表示原始匹配的最小次数匹配，例如：
/ba*/本来匹配“bbbaaaa”中的“baaaa”，但是/ba*?/则匹配“bbbaaaa”中的“b”（因为*表示0次或多次匹配，而加?应该表示最少次数匹配，即0次匹配）。
同理：/ba+?/则匹配“baaaa”中的“ba”。
作为语法结构符号，使用于前置断言中，即后面要说到的x(?=y)和x(?!=y)

7>.：小数点中的“.”号，匹配任何一个单独的字符，但是换行符除外。
标准中总共有哪些字符？请参考：字符集
例如：/a.b/匹配“acbaa”中的“acb”，但是不匹配“abbb”。

8>(x)：表示匹配x(并非特指字符x或者特指一个字符，x表示一个字符串)，而且匹配会被记住，在语法中这种()被称为“capturing parentheses ”，即捕捉用的小括号。
匹配会被记住，是因为在表达式提供的函数中，有些函数返回一个数组，该数组会保存所匹配的所有字符串，例如exec()函数。
另外还要注意()中的x被记住的前提是匹配x。
例子1：
var regx=/a(b)c/;
var rs=regx.exec(“abcddd”);
从上面可以看出,/a(b)c/匹配“abcddd”中的“abc”，因为()的原因，b也会记录下来，因此rs返回的数字内容为：
{abc,b}
例子2：
var regx=/a(b)c/;
var rs=regx.exec(“acbcddd”);
rs返回null，因为/a(b)c/不匹配“acbcddd”，所以()中的b不会被记录下来（尽管字符串中含有b）

9>(?:x)：匹配x，但不会记住x，这种格式中的()被称为“non-capturing parentheses ”，即非捕捉用的小括号。
例子：
var regx=/a(?:b)c/;
var rs=regx.exec(“abcddd”);
从上面可以看出,/a(?:b)c/匹配“abcddd”中的“abc”，因为(?:)的原因，b不会记录下来，因此rs返回的数字内容为：
{abc}

10>X(?=y)：匹配x，仅当后面紧跟着y时。如果符合匹配，则只有x会被记住，y不会被记住。
例子：
var regx=/user(?=name)/;
var rs=regx.exec(“The username is Mary”);
结果：匹配成功，而且rs的值为{user}

11>X(?!y)：匹配x，仅当后面不紧跟着y时。如果符合匹配，则只有x会被记住，y不会被记住。
例子：
var regx=/user(?!name)/;
var rs=regx.exec(“The user name is Mary”);
结果：匹配成功，而且rs的值为{user}
例子2：
var regx=//d+(?!/.)/;
var rs=regx.exec(“54.235”);
结果：匹配成果，rs的值为{5}，不匹配54是因为54后面跟着“.”号，当然235也匹配，但是由于exec方法的行为，235不会被返回

12>x|y：匹配x或y。注意如果x和y都匹配上了，那么只记住x。
例子：
var regx=/beijing|shanghai/;
var rs=regx.exec(“I love beijing and shanghai”);
结果：匹配成功，rs的值为{beijing}，虽然shanghai也匹配，但不会被记住。

13>{n}：匹配前一个字符的n次出现。
n必须是一个非负数，当然如果是一个负数或小数也不会报语法错误。
例子：
var regx=/ab{2}c/;
var rs=regx.exec(“abbcd”);
结果：匹配成功，rs的值为：{abbc}。

14>{n,}：匹配前一个字符的至少n次出现。
例子：
var regx=/ab{2,}c/;
var rs=regx.exec(“abbcdabbbc”);
结果：匹配成功，rs的值为：{abbc}。注意为什么abbbc也符合条件为什么没有被记住，这与exec方法的行为有关，后面会统一讲解。

15>{n,m}：匹配前一个字符的至少n次最多m次的出现。
只要n与m为数字，而且m>=n就不会报语法错误。
例子：
var regx=/ab{2,5}c/;
var rs=regx.exec(“abbbcd”);
结果：匹配成功，rs的值为：{abbbc}。
例子2：
var regx=/ab{2,2}c/;
var rs=regx.exec(“abbcd”);
结果：匹配成功，rs的值为：{abbc}。
例子3：
var regx=/ab(2,5)/;
var rs=regx.exec(“abbbbbbbbbb”);
结果：匹配成功，rs的值为：{abbbbb}，这说明，如果前一个字符出现多于m次，则只匹配m次。另外：
var regx=/ab(2,5)c/;
var rs=regx.exec(“abbbbbbbbbbc”);
结果：匹配失败，rs的值为：null，为什么匹配失败，因为b多于5个则b(2,5)会匹配前5个b，，而表达式/ab(2,5)c/中b后面是c，但字符串中5个b之后还是b所以会报错。

16>[xyz]：xyz表示一个字符串，该模式表示匹配[]中的一个字符，形式上[xyz]等同于[x-z]。
例子：
var regx=/a[bc]d/;
var rs=regx.exec(“abddgg”);
结果：匹配成功，rs的值为：{abd}
例子2：
var regx=/a[bc]d/;
var rs=regx.exec(“abcd”);
结果：匹配失败，rs的值为：null，之所以失败，是因为[bc]表示匹配b或c中的一个，但不会同时匹配。

17>[^xyz]：该模式表示匹配非[]中的一个字符，形式上[^xyz]等同于[^x-z]。
例子：
var regx=/a[^bc]d/;
var rs=regx.exec(“afddgg”);
结果：匹配成功，rs的值为：{afd}
例子2：
var regx=/a[^bc]d/;
var rs=regx.exec(“abd”);
结果：匹配失败，rs的值为：。

18>[/b]：匹配退格键。

19>/b：匹配一个词的边界符，例如空格和换行符等等，当然匹配换行符时，表达式应该附加参数m。
例子：
var regx=//bc./;
var rs=regx.exec(“Beijing is a beautiful city”);
结果：匹配成功，rs的值为：{ci}，注意c前边的空格不会匹配到结果中，即{ ci}是不正确的。

20>/B：代表一个非单词边界。
例子：
var regx=//Bi./;
var rs=regx.exec(“Beijing is a beautiful city”);
结果：匹配成功，rs的值为：{ij}，即匹配了Beijing中的ij。

21>/cX，匹配一个控制字符。例如， /cM 匹配一个 Control-M 或
回车符。 x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一
个原义的 ’c’ 字符。（实际的例子还需补充）

21>/d：匹配一个数字字符，等同于[0-9]。
例子：
var regx=/user/d/;
var rs=regx.exec(“user1”);
结果：匹配成功，rs的值为：{user1}

22>/D：匹配一个非数字字符，等同于[^0-9]。
例子：
var regx=/user/D/;
var rs=regx.exec(“userA”);
结果：匹配成功，rs的值为：{userA}

23>/f：匹配一个换页符。

24>/n：匹配一个换行符。因为是换行符，所以在表达式中要加入m参数。
例子：
var regx=/a/nbc/m;
       var str=“a
               bc”;
       var rs=regx.exec(str);
       结果：匹配成功，rs的值为：{ }，如果表达式为/a/n/rbc/，则不会被匹配，因此在一般的编辑器中一个”Enter”键代表着“回车换行”，而非“换行回车”，至少在textarea域中是这样的。
25>/r：匹配一个回车符

26>/s：匹配一个空格符，等同于[ /f/n/r/t/v/u00A0/u2028/u2029].
例子：
var regx=//si/;
var rs=regx.exec(“Beijing is a city”);
结果：匹配成功，rs的值为：{ i}

27>/S：匹配一个非空格符，等同于[ ^/f/n/r/t/v/u00A0/u2028/u2029].
例子：
var regx=//Si/;
var rs=regx.exec(“Beijing is a city”);
结果：匹配成功，rs的值为：{ei}

28>/t：匹配一个tab
例子：
var regx=/a/tb/;
var rs=regx.exec(“a bc”);
结果：匹配成功，rs的值为： {a bc}

29>/v：匹配一个竖向的tab

30>/w：匹配一个数字、_或字母表字符，即[A-Za-z0-9_ ]。
例子：
var regx=//w/;
var rs=regx.exec(“$25.23”);
结果：匹配成功，rs的值为：{2}

31>/W：匹配一个非数字、_或字母表字符，即[^A-Za-z0-9_ ]。
例子：
var regx=//w/;
var rs=regx.exec(“$25.23”);
结果：匹配成功，rs的值为：{$}

32>/n：注意不是/n，这里n是一个正整数，表示匹配第n个()中的字符。
例子：
var regx=/user([,-])group/1role/;
var rs=regx.exec(“user-group-role”);
结果：匹配成功，rs的值为：{user-group-role,-}，同样对user,group,role的匹配也是成功的，但像user-group,role等就不对了。

33>/0：匹配一个NUL字符。

34>/xhh：匹配一个由两位16进制数字所表达的字符。

35>/uhhhh：匹配一个由四位16进制数字所表达的字符。

3，表达式操作

1）表达式操作，在这里是指和表达式相关的方法，我们将介绍六个方法。
2）表达式对象（RegExp）方法：

1>exec(str)，返回str中与表达式相匹配的第一个字符串，而且以数组的形式表现，当然如果表达式中含有捕捉用的小括号，则返回的数组中也可能含有()中的匹配字符串，例如：
var regx=//d+/;
var rs=regx.exec(“3432ddf53”);
返回的rs值为：{3432}
var regx2=new RegExp(“ab(/d+)c”);
var rs2=regx2.exec(“ab234c44”);
返回的rs值为：{ab234c,234}
另外，如果有多个合适的匹配，则第一次执行exec返回一个第一个匹配，此时继续执行exec，则依次返回第二个第三个匹配。例如：
var regx=/user/d/g;
var rs=regx.exec(“ddduser1dsfuser2dd”);
var rs1=regx.exec(“ddduser1dsfuser2dd”);
则rs的值为{user1}，rs的值为{rs2}，当然注意regx中的g参数是必须的，否则无论exec执行多少次，都返回第一个匹配。后面还有相关内容涉及到对此想象的解释。

2>test(str)，判断字符串str是否匹配表达式，返回一个布尔值。例如：
var regx=/user/d+/g;
var flag=regx.test(“user12dd”);
flag的值为true。

3）String对象方法

1>match(expr)，返回与expr相匹配的一个字符串数组，如果没有加参数g，则返回第一个匹配，加入参数g则返回所有的匹配
例子：
var regx=/user/d/g;
var str=“user13userddduser345”;
var rs=str.match(regx);
rs的值为：{user1,user3}

2>search(expr)，返回字符串中与expr相匹配的第一个匹配的index值。
例子：
var regx=/user/d/g;
var str=“user13userddduser345”;
var rs=str.search(regx);
rs的值为：0

3>replace(expr,str)，将字符串中匹配expr的部分替换为str。另外在replace方法中，str中可以含有一种变量符号$，格式为$n，代表匹配中被记住的第n的匹配字符串（注意小括号可以记忆匹配）。
例子：
var regx=/user/d/g;
var str=“user13userddduser345”;
var rs=str.replace(regx,”00”);
rs的值为：003userddd0045
例子2：
var regx=/u(se)r/d/g;
var str=“user13userddduser345”;
var rs=str.replace(regx,”$1”);
rs的值为：se3userdddse45
对于replace(expr,str)方法还要特别注意一点，如果expr是一个表达式对象则会进行全局替换（此时表达式必须附加参数g，否则也只是替换第一个匹配），如果expr是一个字符串对象，则只会替换第一个匹配的部分，例如：
var regx=“user”
var str=“user13userddduser345”;
var rs=str.replace(regx,”00”);
rs的值为： 0013userddduser345

4>split(expr)，将字符串以匹配expr的部分做分割，返回一个数组，而且表达式是否附加参数g都没有关系，结果是一样的。
例子：
var regx=/user/d/g;
var str=“user13userddduser345”;
var rs=str.split(regx);
rs的值为：{3userddd,45}

4，表达式相关属性

1）表达式相关属性，是指和表达式相关的属性，如下面的形式：
var regx=/myexpr/;
var rs=regx.exec(str);
其中，和表达式自身regx相关的属性有两个，和表达式匹配结果rs相关的属性有三个，下面将逐一介绍。
2）和表达式自身相关的两个属性：

1>lastIndex，返回开始下一个匹配的位置，注意必须是全局匹配（表达式中带有g参数）时，lastIndex才会有不断返回下一个匹配值，否则该值为总是返回第一个下一个匹配位置，例如：
var regx=/user/d/;
var rs=regx.exec(“sdsfuser1dfsfuser2”);
var lastIndex1=regx.lastIndex;
rs=regx.exec(“sdsfuser1dfsfuser2”);
var lastIndex2=regx.lastIndex;
rs=regx.exec(“sdsfuser1dfsfuser2”);
var lastIndex3=regx.lastIndex;
上面lastIndex1为9，第二个lastIndex2也为9，第三个也是9；如果regx=/user/d/g，则第一个为9，第二个为18，第三个为0。

2>source，返回表达式字符串自身。例如：
var regx=/user/d/;
var rs=regx.exec(“sdsfuser1dfsfuser2”);
var source=regx.source;
source的值为user/d
3）和匹配结果相关的三个属性：

1>index，返回当前匹配的位置。例如：
var regx=/user/d/;
var rs=regx.exec(“sdsfuser1dfsfuser2”);
var index1=rs.index;
rs=regx.exec(“sdsfuser1dfsfuser2”);
var index2=rs.index;
rs=regx.exec(“sdsfuser1dfsfuser2”);
var index3=rs.index;
index1为4，index2为4，index3为4，如果表达式加入参数g，则index1为4，index2为13，index3会报错（index为空或不是对象）。

2>input，用于匹配的字符串。例如：
var regx=/user/d/;
var rs=regx.exec(“sdsfuser1dfsfuser2”);
var input=rs.input;
input的值为sdsfuser1dfsfuser2。

3>[0]，返回匹配结果中的第一个匹配值，对于match而言可能返回一个多值的数字，则除了[0]外，还可以取[1]、[2]等等。例如：
var regx=/user/d/;
var rs=regx.exec(“sdsfuser1dfsfuser2”);
var value1=rs[0];
rs=regx.exec(“sdsfuser1dfsfuser2”);
var value2=rs[0];
value1的值为user1,value2的值为user2

5，实际应用

1）实际应用一
描述：有一表单，其中有一个“用户名”input域
要求：汉字，而且不能少于2个汉字，不能多于4个汉字。
实现：
<script>
function checkForm(obj){
     var username=obj.username.value;
     var regx=/^[/u4e00-/u9fa5]{2,4}$/g
     if(!regx.test(username)){
               alert(“Invalid username!”);
               return false;
     }
     return true;
}
</script>
<form name=“myForm”onSubmit=“return checkForm(this)”>
    <input type=“text” name=“username”/>
    <input type=“submit” vlaue=“submit”/>
</form>
2）实际应用二
描述：给定一个含有html标记的字符串，要求将其中的html标记去掉。
实现：
<script>
function toPlainText(htmlStr){
     var regx=/<[^>]*>|<//[^>]*>/gm;
     var str=htmlStr.replace(regx,"");
     return str;
}
</script>
<form name=“myForm”>
    <textarea id=“htmlInput”></textarea>
    <input type=“button” value=“submit” οnclick=“toPlainText(document.getElementById(‘htmlInput’).value”/>
</form>

三，小结

1，Javascript正则表达式，我想在一般的程序员之中，使用者应该不是很多，因为我们处理的页面一般都不是很复杂，而复杂的逻辑一般我们都在后台处理完成了。但是目前趋势已经出现了扭转，富客户端已经被越来越多的人接受，而Javascript就是其中的关键技术，对于复杂的客户端逻辑而言，正则表达式的作用也是很关键的，同时它也是Javascript高手必须要掌握的重要技术之一。

2，为了能够便于大家对前面讲述的内容有一个更为综合和深刻的认识，我将前面的一些关键点和容易犯糊涂的地方再系统总结一下，这部分很关键！
总结1：附件参数g的用法
表达式加上参数g之后，表明可以进行全局匹配，注意这里“可以”的含义。我们详细叙述：
1）对于表达式对象的exec方法，不加入g，则只返回第一个匹配，无论执行多少次均是如此，如果加入g，则第一次执行也返回第一个匹配，再执行返回第二个匹配，依次类推。例如
var regx=/user/d/;
var str=“user18dsdfuser2dsfsd”;
var rs=regx.exec(str);//此时rs的值为{user1}
var rs2=regx.exec(str);//此时rs的值依然为{user1}
如果regx=/user/d/g；则rs的值为{user1}，rs2的值为{user2}
通过这个例子说明：对于exec方法，表达式加入了g，并不是说执行exec方法就可以返回所有的匹配，而是说加入了g之后，我可以通过某种方式得到所有的匹配，这里的“方式”对于exec而言，就是依次执行这个方法即可。
2）对于表达式对象的test方法，加入g于不加上g没有什么区别。
3）对于String对象的match方法，不加入g，也只是返回第一个匹配，一直执行match方法也总是返回第一个匹配，加入g，则一次返回所有的匹配（注意这与表达式对象的exec方法不同，对于exec而言，表达式即使加上了g，也不会一次返回所有的匹配）。例如：
var regx=/user/d/;
var str=“user1sdfsffuser2dfsdf”;
var rs=str.match(regx);//此时rs的值为{user1}
var rs2=str.match(regx);//此时rs的值依然为{user1}
如果regx=/user/d/g，则rs的值为{user1,user2}，rs2的值也为{user1,user2}
4）对于String对象的replace方法，表达式不加入g，则只替换第一个匹配，如果加入g，则替换所有匹配。（开头的三道测试题能很好的说明这一点）
5）对于String对象的split方法，加上g与不加g是一样的，即：
var sep=/user/d/;
var array=“user1dfsfuser2dfsf”.split(sep);
则array的值为{dfsf, dfsf}
此时sep=/user/d/g，返回值是一样的。
6）对于String对象的search方法，加不加g也是一样的。
总结2：附加参数m的用法
附加参数m，表明可以进行多行匹配，但是这个只有当使用^和$模式时才会起作用，在其他的模式中，加不加入m都可以进行多行匹配（其实说多行的字符串也是一个普通字符串），我们举例说明这一点
1）使用^的例子
var regx=/^b./g;
var str=“bd76 dfsdf
         sdfsdfs dffs
         b76dsf sdfsdf”;
var rs=str.match(regx);
此时加入g和不加入g，都只返回第一个匹配{bd}，如果regx=/^b./gm，则返回所有的匹配{bd,b7}，注意如果regx=/^b./m，则也只返回第一个匹配。所以，加入m表明可以进行多行匹配，加入g表明可以进行全局匹配，综合到一起就是可以进行多行全局匹配
2）使用其他模式的例子，例如
var regx=/user/d/;
var str=“sdfsfsdfsdf
         sdfsuser3 dffs
         b76dsf user6”;
var rs=str.match(regx);
此时不加参数g，则返回{user3}，加入参数g返回{user3,user6}，加不加入m对此没有影响。
3）因此对于m我们要清楚它的使用，记住它只对^和$模式起作用，在这两种模式中，m的作用为：如果不加入m，则只能在第一行进行匹配，如果加入m则可以在所有的行进行匹配。我们再看一个^的例子
var regx=/^b./;
var str=“ret76 dfsdf
         bjfsdfs dffs
         b76dsf sdfsdf”;
var rs=str.match(regx);
此时rs的值为null，如果加入g，rs的值仍然为null，如果加入m，则rs的值为{bj}（也就是说，在第一行没有找到匹配，因为有参数m，所以可以继续去下面的行去找是否有匹配），如果m和g都加上，则返回{bj,b7}（只加m不加g说明，可以去多行进行匹配，但是找到一个匹配后就返回，加入g表明将多行中所有的匹配返回，当然对于match方法是如此，对于exec呢，则需要执行多次才能依次返回）
总结3：在HTML的textarea输入域中，按一个Enter键，对应的控制字符为“/r/n”，即“回车换行”，而不是“/n/r”，即“换行回车”，我们看一个前面我们举过的例子：
var regx=/a/r/nbc/;
var str=“a
         bc”;
var rs=regx.exec(str);
结果：匹配成功，rs的值为：{      }，如果表达式为/a/n/rbc/，则不会被匹配，因此在一般的编辑器中一个”Enter”键代表着“回车换行”，而非“换行回车”，至少在textarea域中是这样的。

四，应用案例

1，正则表达式使用场景：
1）登录场景，检查用户输入的用户名，要求：
字符长度在6到18之间
字符必须为字母、数字或者下划线的组合
2）购物场景，对于商品列表的描述（标签、条形码、单价）等有些用户可能会提出下面需求：
希望可以对商品列表的某一列描述进行字号的自定义，而且下次登录仍然保持用户的修改
2，下面看一下在上述两个场景中，正则表达式的使用方式和具体实现。

1）登录场景部分正则表达式实现

2）购物场景部分正则表达式实现
1>需求分析：用户希望可以对商品列表的某一列描述进行字号的自定义，而且下次登录仍然保持用户的修改

2>程序设计

类图：

3>代码实现
PageSetting类

//验证email格式是否合法
function checkEmail(email)
{
   var reEmail=/^[_/.0-9a-z-]+@([0-9a-z][0-9a-z-]+/.)+[a-z]{2,5}/;
        if (!(email.match(reEmail)&&email!=""))
        {
             return false;
        }
        else {
    return true;

   }
}

posted @ 2008-06-03 14:49 sofot 阅读(7) | 评论 (0) | 编辑收藏

2008年5月15日

奥运倒计时

摘要: 服务器时间倒计时 //格式化输出服务器时间 function getSeverTime(){ var xmlHttp = false; //获取服务器时间 try { xmlHttp = new Acti... 阅读全文

posted @ 2008-05-15 17:33 sofot 阅读(8) | 评论 (0) | 编辑收藏

javascript+java截取图像，图像处理

摘要: 很多网站都希望用户上传的头像不变形，同时又不希望由公司编辑来进行头像的处理；下面这个程序会让你眼前一亮；javascript+java实现用户上传头像并且可按照规定头像长宽比例截图；文件1：index.htm (上传文件页面） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0&nb... 阅读全文

posted @ 2008-05-15 17:15 sofot 阅读(22) | 评论 (0) | 编辑收藏

2008年4月25日

tomcat连接数据库（SQL2000）

新建工程testmydb；
在$tomcat/conf/Catalina/localhost下建立testmydb.xml

<? xml version="1.0" encoding="UTF-8" ?>
< Context >
         < Resource name ="jdbc/testmydb" type ="javax.sql.DataSource"
        password ="******"
        driverClassName ="com.microsoft.jdbc.sqlserver.SQLServerDriver"
        maxIdle ="2"
        maxWait ="5000"
        username ="babyuser"
        url ="jdbc:microsoft:sqlserver://127.0.0.1:1433;DatabaseName=bbs"
        maxActive ="4" />
</ Context >

在$tomcat/webapps/testmydb/WEB-INF/下新建web.xml

<? xml version="1.0" encoding="ISO-8859-1" ?>

< web-app xmlns ="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi ="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation ="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
    version ="2.4" >

   < display-name > Tomcat Documentation </ display-name >
   < description >
     Tomcat Documentation.
   </ description >
     < resource-ref >
     < description > sqlserverDB Connection </ description >
     < res-ref-name > jdbc/testmydb </ res-ref-name >
     < res-type > javax.sql.DataSource </ res-type >
     < res-auth > Container </ res-auth >
     </ resource-ref >

</ web-app >

在$tomcat/webapps/quickstart/目录下新建index.jsp文件

<% @ page contentType="text/html;charset=gb2312" %>
<% @ page import="java.sql.*" %>
<% @ page import="javax.naming.*" %>
<% @ page import="javax.sql.*" %>
<% !
public static String getGBString(String src) {
        try {
            return new String(src.getBytes("ISO-8859-1"), "gb2312");
        } catch (java.io.UnsupportedEncodingException e) {
            return null;
        }
    }
%>
< html >< head >< title > JDBC Test </ title ></ head >< body >
<%
Connection conn=null;
Statement stmt=null;
ResultSet rs=null;
ResultSetMetaData md=null;
try
{Context initCtx=new InitialContext();
DataSource ds=(DataSource)initCtx.lookup("java:comp/env/jdbc/quickstart");
if(ds!=null)
{
out.println("已经获得DataSource");
//out.println(ds.toString());
conn=ds.getConnection();
stmt=conn.createStatement();
out.println("aa");
rs=stmt.executeQuery("SELECT TOP 5 * FROM Dv_Topic WHERE (Boardid = 37) AND (istop = 1)");
md=rs.getMetaData();
out.println("<table border=1>");
out.println("<tr>");
for(int i=0;i<md.getColumnCount();i++)
{
out.println("<td>"+md.getColumnName(i+1)+"</td>");
}
while(rs.next())
{
out.println("<tr>");
out.println("<td>"+rs.getString(1)+"</td>");
out.println("<td>"+getGBString(rs.getString(2))+"</td>");
out.println("<td>"+rs.getString(3)+"</td>");
out.println("<td>"+rs.getString(4)+"</td>");
out.println("</tr>");
}
out.println("</table>");
conn.close();
}
}
catch(Exception e)
{
out.println(e.toString());
System.out.println(e.toString());
}
%>
</ body ></ html >

点击 http://localhost:8080/testmydb/链接成功！会出现
已经获得DataSource aa

TopicID

Title

Boardid

PollID

LockTopic

Child

PostUsername

PostUserid

DateAndTime

hits

Expression

VoteTotal

LastPost

LastPostTime

istop

isvote

isbest

PostTable

SmsUserList

IsSmsTopic

LastSmsTime

TopicMode

Mode

GetMoney

UseTools

GetMoneyType

HideName

201314

亲吻北京！——我们伟大的祖国！

当然tomcat连接需要sql2000的3个驱动文件msutil.jar、msbase.jar、mssqlserver.jar
sql2000需要升级到sp4；

posted @ 2008-04-25 15:35 sofot 阅读(26) | 评论 (0) | 编辑收藏

2008年4月17日

java 图片切割,缩放,转换类型

摘要: 未经过测试,请大家将测试结果回复上来; import java.io.*; import java.awt.*; import java.awt.image.*; import java.awt.Graphics; import java.awt.color.ColorSpace; import javax.imageio.I... 阅读全文

posted @ 2008-04-17 10:42 sofot 阅读(29) | 评论 (0) | 编辑收藏

java合成图像

下面是一个合并图象的源程序。注意：还没有经过测试。

import java.io.File;
import java.awt.image.BufferedImage;
import javax.imageio.ImageIO;

public class test
{
  public static void main(String args[])
  {
    try
    {
      //读取第一张图片
      File fileOne = new File("D://M114317.png");
      BufferedImage ImageOne = ImageIO.read(fileOne);
      int width = ImageOne.getWidth();//图片宽度
      int height = ImageOne.getHeight();//图片高度
      //从图片中读取RGB
      int[] ImageArrayOne = new int[width*height];
      ImageArrayOne = ImageOne.getRGB(0,0,width,height,ImageArrayOne,0,width);
      //对第二张图片做相同的处理
      File fileTwo = new File("D://M114320.png");
      BufferedImage ImageTwo = ImageIO.read(fileTwo);
      int[] ImageArrayTwo = new int[width*height];
      ImageArrayTwo = ImageTwo.getRGB(0,0,width,height,ImageArrayTwo,0,width);
      //生成新图片
      BufferedImage ImageNew = new BufferedImage(width*2,height,BufferedImage.TYPE_INT_RGB);
      ImageNew.setRGB(0,0,width,height,ImageArrayOne,0,width);//设置左半部分的RGB
      ImageNew.setRGB(width,0,width,height,ImageArrayTwo,0,width);//设置右半部分的RGB
      File outFile = new File("d://out.png");
      ImageIO.write(ImageNew, "png", outFile);//写图片
    }
    catch(Exception e)
    {
      e.printStackTrace();
    }
  }
}

posted @ 2008-04-17 10:32 sofot 阅读(24) | 评论 (0) | 编辑收藏

触发式导航栏与fieldset

摘要: 触发式导航栏又称选项卡导航栏,在WEB中的实现: <Style type="text/css" /> body,td,th,form {}{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px; padd... 阅读全文

posted @ 2008-04-17 09:37 sofot 阅读(31) | 评论 (0) | 编辑收藏

2008年4月1日

DIV+CSS布局中的IE与FF兼容问题!

在ff测试div+css的过程中发现不少问题，主要原因是代码的不规范书写。

1、居中问题
div里的内容，ie默认为居中，而ff默认为左对齐。
使ff内容居中的方法是增加代码margin:auto;

2、高度问题
设有两横行div排列，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在ff中会出现两个div重叠的现象；但在ie中，下面的div会自动给上面的div让出空间。所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节。
或者设置：overflow:hidden

3、clear:both;
拿footer为例，有时候如果上面使用了float控制的n列的布局，那么在用ff浏览时footer很有可能不老实，到处乱动——因为他还在受到浮动（float）的控制。如果想让它老老实实呆在页面下方，在footer的div中写入clear:both;就可以达到效果了！

4、浮动ie产生的双倍距离

#box{
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}

5、重点讲解：display:block,inline两个元素 display(显示)
display:block; //可以为内嵌元素模拟为块元素
display:inline; //实现同一行排列的的效果
diplay:table; //for ff,模拟table的效果

Display:block元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

display:inline就是将元素显示为行内元素.
inline元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

例子：

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > 无标题文档 </ title >
< style type ="text/css" >
#inline{width:400px; height:40px;background:#99CCCC;padding:15px 0px 0px 15px}
#inline ul{ margin:0px; list-style:none;}
#inline ul li{display:inline; font-size:12px;margin-left:5px}
#block{width:400px; height:40px;background:#FFCC99;padding:15px 0px 0px 15px}
#block ul{ margin:0px; list-style:none;}
#block ul li{display:block; font-size:12px;height:20px}
#div_inline{ width:800px;display:inline;height:120px;}
</ style >
</ head >
< body >
< div id ="inline" >
< ul >
< li > 天天招生网
< li > 心血管网
< li > 高血压网
< li > 先心病网
</ ul >
</ div >
< p >
< div id ="block" >
< ul >
< li > 天天招生网 </ li >
< li > 心血管网 </ li >
< li > 高血压网 </ li >
< li > 先心病网 </ li >
</ ul >
</ div >
</ p >
</ body ></ html >

6、IE与FF宽度和高度的问题
min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。整体最窄770px，最宽1024px，也就是说窗口小于770xp就出底部滚动条，如果大于1024px自动屏幕居中。IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
CSS这样设计：

#container{
min-width: 600px;
width:expression(document.body.clientWidth < 600 ? "600px": "auto" );
}

第一个min-width是正常的；但第2行的width使用了Javascrīpt，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascrīpt的判断来实现最小宽度。

同样的办法也可以为IE实现最大宽度：

#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600 ? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto";
}

7、FF: 支持 !important, IE 则忽略,
可用 !important （例：height:30px!important; height:26px;）为 FF 特别设置样式
div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行（背景图片需要设置 float: left ）。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格
在FF和IE中的BOX模型解释不一致导致相差2px解决方法：
div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

在Firefox/Mozilla 浏览器中，对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)；而在IE/Opera浏览器中，对象的实际宽度 = (margin-left) + width + (margin-right)。

posted @ 2008-04-01 23:22 sofot 阅读(87) | 评论 (0) | 编辑收藏

2008年3月25日

FireFox与IE开发上的一些区别(转)

文章原出处:http://blog.csdn.net/Wgf2006/archive/2007/12/20/1956538.aspx
   1. window.event

          * IE：有window.event对象
          * FF：没有window.event对象。可以通过给函数的参数传递event对象。如οnmοusemοve=doMouseMove(event)

   2. 鼠标当前坐标

          * IE：event.x和event.y。
          * FF：event.pageX和event.pageY。
          * 通用：两者都有event.clientX和event.clientY属性。

   3. 鼠标当前坐标(加上滚动条滚过的距离)

          * IE：event.offsetX和event.offsetY。
          * FF：event.layerX和event.layerY。

   4. 标签的x和y的坐标位置：style.posLeft 和 style.posTop

          * IE：有。
          * FF：没有。
          * 通用：object.offsetLeft 和 object.offsetTop。

   5. 窗体的高度和宽度

          * IE：document.body.offsetWidth和document.body.offsetHeight。注意：此时页面一定要有body标签。
          * FF：window.innerWidth和window.innerHegiht，以及document.documentElement.clientWidth和document.documentElement.clientHeight。
          * 通用：document.body.clientWidth和document.body.clientHeight。

   6. 添加事件

          * IE：element.attachEvent("onclick", func);。
          * FF：element.addEventListener("click", func, true)。
          * 通用：element.οnclick=func。虽然都可以使用onclick事件，但是onclick和上面两种方法的效果是不一样的，onclick 只有执行一个过程，而attachEvent和addEventListener执行的是一个过程列表，也就是多个过程。例如： element.attachEvent("onclick", func1);element.attachEvent("onclick", func2)这样func1和func2都会被执行。

   7. 标签的自定义属性

          * IE：如果给标签div1定义了一个属性value，可以div1.value和div1["value"]取得该值。
          * FF：不能用div1.value和div1["value"]取。
          * 通用：div1.getAttribute("value")。

   8. 父节点、子节点和删除节点

          * IE：parentElement、parement.children，element.romoveNode(true)。
          * FF：parentNode、parentNode.childNodes，node.parentNode.removeChild(node)。

   9. 画图

          * IE：VML。
          * FF：SVG。

10. CSS：透明

          * IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
          * FF：opacity:0.6。

11. CSS：圆角

          * IE：不支持圆角。
          * FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;。

12. CSS：双线凹凸边框

          * IE：border:2px outset;。
          * FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;。

13. 其它（待整理）
　　FireFox: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

　　FireFox: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

　　FireFox: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

　　FireFox: 支持 !important, IE 则忽略, 可用 !important 为　FireFox 特别设置样式

　　div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

　　cursor: pointer 可以同时在 IE　FireFox 中显示游标手指状， hand 仅 IE 可以

　　FireFox: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格

　　XHTML+CSS兼容性解决方案小集
　　使用XHTML＋CSS构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰，我就先把一些我遇到的问题写在下面:
　　1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：
　　div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：
　　div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
[url=http://bbs.itokit.com/][color=white]http://bbs.itokit.com/[/color][/url][color=white] 专业的web开发交流论坛[/color]
　　2.IE5 和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时可以做如下修改
　　div{width:300px!important;width　/**/:340px;margin:0　10px　0　10px}

　　3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
　　ul{margin:0;padding:0;}就能解决大部分问题

　　4.关于脚本，在xhtml1.1中不支持language属性，只需要把代码改为
　　<script　type=”text/javascript”>
　　FireFox: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
　　IE怎么不行? .div{width:100px;margin:0 auto;}一样居中
　　FireFox: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
　　这个是ie对css盒模型解释有问题造成的,只能迁就它网页教学网
　　FireFox: 支持 !important, IE 则忽略, 可用 !important 为　FireFox 特别设置样式
　　IE7 一样兼容 !important 了
　　cursor: pointer 可以同时在 IE　FireFox 中显示游标手指状， hand 仅 IE 可以
　　pointer是标准的写法,hand是ie6之前版本自行定义的

　　补充:
　　ie6有margin双倍外补丁bug,需要做css .hack
　　firefox更符合标准,在浮动和清除浮动上需要特别注意,而ie容错性比较好
　　ie中height小于一定值(可能是18px)时,可能会在页面上体现不出来,需要overflow:hidden;而firefox可以完全体现height;
　　装好ie6 ie7 ff2大致写个一两个页面就知道大概的不同了,其实不难
　　屏蔽IE浏览器（也就是IE下不显示）
　　*:lang(zh) select {font:12px　!important;} /*FF的专用*/
　　select:empty {font:12px　!important;} /*safari可见*/
　　这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

　　仅IE7识别
　　*+html　{…}
　　当面临需要只针对IE7做样式的时候就可以采用这个HACK。
　　IE6及IE6以下识别
　　* html　{…}
　　这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
　　html/**/ >body　select {……}网页教学网
　　这句与上一句的作用相同。
　　仅IE6不识别
　　select { display /*IE6不识别*/:none;}
　　这里主要是通过CSS注释分开一个属性与值，流释在冒号前。
　　仅IE6与IE5不识别
　　select/**/ { display /*IE6,IE5不识别*/:none;}
　　这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。
　　仅IE5不识别
　　select/*IE5不识别*/ { display:none;}
　　这一句是在上一句中去掉了属性区的注释。只有IE5不识别
　　盒模型解决方法
　　selct {width:IE5.x宽度; voice-family :""}""; voice-family:inherit; width:正确宽度;}
　　盒模型的清除方法不是通过!important来处理的。这点要明确。
　　清除浮动
　　select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
　　在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。

　　截字省略号
　　select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
　　这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。

posted @ 2008-03-25 15:56 sofot 阅读(50) | 评论 (0) | 编辑收藏

java设计模式之Singleton(单态).

定义:
Singleton模式主要作用是保证在Java应用程序中，一个类Class只有一个实例存在。

在很多操作中，比如建立目录,数据库连接都需要这样的单线程操作。

还有, singleton能够被状态化; 这样，多个单态类在一起就可以作为一个状态仓库一样向外提供服务，比如，你要论坛中的帖子计数器，每次浏览一次需要计数，单态类能否保持住这个计数，并且能synchronize的安全自动加1，如果你要把这个数字永久保存到数据库，你可以在不修改单态接口的情况下方便的做到。

另外方面，Singleton也能够被无状态化。提供工具性质的功能，

Singleton模式就为我们提供了这样实现的可能。使用Singleton的好处还在于可以节省内存，因为它限制了实例的个数，有利于Java垃圾回收（garbage collection）。

我们常常看到工厂模式中类装入器(class loader)中也用Singleton模式实现的,因为被装入的类实际也属于资源。

具体实施:
用静态方法实现 Singleton

这种方法是使用静态方法来监视实例的创建.为了防止创建一个以上的实例,我们最好把构造器声明为 private.

这样可以防止客户程序员通过除由我们提供的方法之外的任意方式来创建一个实例,如果不把构造器声明为private,编译器就会自作聪明的自动同步一个默认的friendly构造器.这种实现方法是最常见的:

/*Singleton.java*/
public class Singleton {

    private Singleton(){
    }

    private static Singleton INSTANCE = null;


//    private static Singleton INSTANCE = new Singleton();

    public static synchronized Singleton getInstance(){
        if(INSTANCE == null){
            INSTANCE = new Singleton();
        }
        return INSTANCE;
    }
}

/*SingletonDemo.java 测试类*/
public class SingletonDemo {

    /**
     * @param args
     */
    public static void main(String[] args) {
        // TODO Auto-generated method stub
        Singleton d = Singleton.getInstance();
        Singleton e = Singleton.getInstance();
        if(d == e){
            System.out.println("same");
        }else{
            System.out.println("not same");
        }
    }

}

运行结果：
same
这证明只创建了一个实例.

浮生若梦丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Javascript 正则表达式教程

一，概述1，正则表达式，可以说是任何一种编程语言都提供的机制，它主要是提供了对字符串的处理能力。2，正则表达式在页面处理中的使用场景：1）表单验证。验证某些域符合某种规则，例如邮件输入框必须输入的是邮件、联系电话输入框输入的必须是数字等等2）处理DOM模型。例如通过表达式定位DOM中的一个对象或一系列对象，一个例子就是定位id属性中含有某个特殊字符的div对象。3）纯
复制链接

扫一扫