今回は、JSで最も基本的な正規表現の使い方について詳しく説明します。JSで基本的な正規表現を使用する際の注意点について、実際のケースを見てみましょう。
正規表現は非常に強力なものです。今日は、JS を初めて使用する人に簡単に紹介します。議論の余地がある側面があれば、メッセージを残してください。
1.1 正規表現とは
正規表現 (正規表現) は、ECMAScript の RegExp クラスで正規表現を表し、String と RegExp の両方で正規表現の使用を定義します。強力なパターン マッチング、テキストの検索と置換の機能。
正規表現は、文字列のパターンを照合し、それらを取得および置換するために使用されます。正規表現は、文字列のパターン マッチングを実行するための強力なツールです。
1.2 正規表現の役割
正規表現は主にクライアントの入力データを検証するために使用されます。
ユーザーがフォームに入力してボタンをクリックすると、フォームはサーバー側で通常、PHP、ASP.NET、JSP などのサーバー スクリプトを使用してさらに処理されます。クライアント側の検証により、サーバー側のシステム リソースが大幅に節約され、より良いユーザー エクスペリエンスが提供されます。
2. 正規表現を作成します==(123)==
正規表現を使用するには、まず 正規表現オブジェクトを作成する必要があります。オブジェクトを作成するには、次の 2 つの方法があります。
2.1 方法 1: キーワード new を使用してvar patt = new RegExp(pattern,modifiers);
パラメータ 2: パターン修飾子。グローバル マッチング、大文字と小文字を区別するマッチング、および複数行のマッチングを指定するために使用されます
<script type="text/javascript"> /* 创建了一个正则表达式 参数1:模式是:girl,意思是说可以匹配 "girl"这样的字符串 参数2:模式修饰符:gi g代表全局匹配 i代表不区分大小写 */ var pa = new RegExp("girl", "gi"); //测试参数中的字符串"你好我的girl" 是否与匹配模式匹配。 var isExist = pa.test("你好我的girl"); // 在本例中,是匹配的,这个字符串包含girl,所以返回true alert(isExist); //true </script>
var pa = /pattern/modifiers;
例: 上記の例は次のように記述できます var pa = /girl/gi;
注: この時点で、パターンとパターン修飾子の両方に二重引用符または一重引用符を追加できます
<script type="text/javascript"> var pa = /girl/gi; alert(pa.test("厉害了我的girl")); //true </script>
3. 正規表現のパターン修飾子 ==(126)== JavaScript には 3 つのパターン修飾子があります: g i u
4. 正規表現メソッドの詳細説明==(127)==よく使われる正規表現メソッドはtest()とexec()の2つです
4.1 test()メソッドtest(string)
<script type="text/javascript"> var pa = /girl/gi; if(pa.test("厉害了我的girl")){ alert("这个女孩和你很配"); }else { alert("你注定没有女孩去匹配"); } </script>
exec(string): このメソッドは、グループをキャプチャするために特別に設計されています
数组的第一项目是与整个模式匹配的字符串,其他项是与模式中捕获组匹配的字符串
如果没有捕获组,则数组中只有第一项。关于捕获组的概念以后再说
<script type="text/javascript"> var pa = /girl/gi; var testStr = "myGirl, yourgirl, hisgIrl"; var girls = pa.exec(testStr); //捕获 alert(girls.length + ":" + (girls instanceof Array)); //正则表达式没有捕获组,所以数组长度为1 alert(girls[0]); //第一次捕获的是 Girl //因为我们是用的全局匹配,所以此次匹配的时候从上次匹后的位置开始继续匹配 alert(pa.exec(testStr)[0]); // girl alert(pa.exec(testStr)); // gIrl alert(pa.exec(testStr)); //继续向后没有匹配的字符串,所以返回null // 返回null,如果继续再匹配,则会回到字符串的开始,重写开始匹配。 alert(pa.exec(testStr)); // Girl // ...开启新一轮匹配 </script>
所以我们如果想找到全部匹配的字符串可以时候用循环,结束条件就是匹配结果为null
<script type="text/javascript"> var pa = /girl/gi; var testStr = "myGirl, yourgirl, hisgIrl"; var girls; while(girls = pa.exec(testStr)){ //如果等于null,会自动转成 false,结束。 alert(girls); } </script>
分组。在正则表达式中用()括起来任务是一组。组可以嵌套。
<script type="text/javascript"> //()内的内容就是第1组(Girl),其实我们完整真个表达式可以看出第0组 girl(Girl) // 将来对应着匹配结果数组的下标。 var pa = /girl(Girl)/gi; var test = "girlGirl abdfjla Girlgirl fal girl"; var girls; while(girls = pa.exec(test)){ //匹配之后,数组的第0个元素对应的这第0组的匹配结果,第1个元素对应着第1组的匹配结果 for (var i = 0; i < girls.length; i++) { console.log(girls[i]); } console.log("-------------"); } </script> //最终运行结果: girlGirl Girl ------------- Girlgirl girl ------------
五、正则表达式规则==(124)==
表达式规则
正则表达式元字符是包含特殊含义的字符。它们有一些特殊功能,可以控制匹配模式的
方式。反斜杠后的元字符将失去其特殊含义。
字符类:单个字符和数字
[0-9A-Za-z]
元字符/元符号 匹配情况
. 匹配除换行符外的任意字符
[a-z0-9] 匹配括号中的字符集中的任意字符
[^a-z0-9] 匹配任意不在括号中的字符集中的字符
\d ==[0-9] 匹配数字
\D ==[^0-9] 匹配非数字,同[^0-9]相同
\w [0-9A-Za-z_] 匹配字母和数字及_
\W 匹配非(字母和数字及_)
字符类:空白字符
元字符/元符号 匹配情况
\0 匹配null 字符
\b 匹配空格字符
\n 匹配换行符
\r 匹配回车字符
\t 匹配制表符
\s 匹配空白字符、空格、制表符和换行符
\S 匹配非空白字符
字符类:锚字符
元字符/元符号 匹配情况
^ 行首匹配
$ 行尾匹配
字符类:重复字符
元字符/元符号 匹配情况
? 例如(x?) 匹配0个或1 个x
* 例如(x*) 匹配0个或任意多个x
+ 例如(x+) 匹配至少一个x
(xyz)+ 匹配至少一个(xyz)
{m,n} 例如x{m,n} n>=次数>=m 匹配最少m个、最多n个x
{n} 匹配前一项n次
{n,} 匹配前一项n次,或者多次
六、常用正则表示==(128)==
1、检查邮政编码
var pattern = /[1-9][0-9]{5}/; //共6位数字,第一位不能为0 var str = '224000'; alert(pattern.test(str));
2、检查文件压缩包
var pattern = /[\w]+\.zip|rar|gz/; //\w 表示所有数字和字母加下划线 var str = '123.zip'; //\.表示匹配.,后面是一个选择 alert(pattern.test(str));
3、删除多余空格
var pattern = /\s/g; //g 必须全局,才能全部匹配 var reg=new RegExp('\\s+','g'); var str = '111 222 333'; var result = str.replace(pattern,''); //把空格匹配成无空格 alert(result);
4、删除空格
var pattern = /^\s+/; var str = ' goo gle '; alert(str+" "+str.length); var result = str.replace(pattern, ''); alert(result+" "+result.length); pattern = /\s+$/; result = result.replace(pattern, ''); alert(result+" "+result.length); pattern = /\s+/g; result = result.replace(pattern, ''); alert(result+" "+result.length); 5、简单的电子邮件验证 var pattern = /^([a-zA-Z0-9_\.\-]+)@([a-zA-Z0-9_\.\-]+)\.([a-zA-Z]{2,4})$/; var str = 'yc60.com@gmail.com'; alert(pattern.test(str)); var pattern = /^([\w\.\-]+)@([\w\.\-]+)\.([\w]{2,4})$/; var str = 'yc60.com@gmail.com'; alert(pattern.test(str));
七、支持正则表达式的字符串方法
方法 | 描述 |
---|---|
search | 检索与正则表达式相匹配的第一个匹配项的索引。 |
match | 找到一个或多个正则表达式的匹配。 |
replace | 替换与正则表达式匹配的子串。 |
split | 把字符串分割为字符串数组。 |
<script type="text/javascript"> var s = "Abc123aBc"; alert(s.search(/abc/gi)); alert(s.search(/abc/gi)); // 即使设置的全局模式,每次search也是从开始向后查找 //match方法和正则表达式的exec()方法的作用是一样的,但是match会一次性把所有的匹配放在一个数组中,全部返回 alert(s.match(/abc/gi)); // Abc,aBc alert(s.replace(/[ab]/gi, "x")); //把a或b替换成x var ss = s.split(/[0-9]+/gi); //用1个或多个数字切割。 Abc,aBc alert(ss); </script>
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上がJSの最も基本的な正規表現の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。