ホームページ > 記事 > ウェブフロントエンド > JS基本シリーズの正規表現
JS基本シリーズの正規表現
- 黄舟オリジナル
- 2017-02-20 14:09:141307ブラウズ
正規表現は非常に強力なものです。今日は JS を初めて使用する人向けに簡単に紹介します。議論の余地がある点があれば、メッセージを残してください。 
1.1 正規表現とは
正規表現は、文字パターンを記述するオブジェクトであり、String と RegExp の両方で正規表現の使用を定義します。強力なパターン マッチング、テキスト検索と置換。
正規表現は、文字列のパターンを照合し、それらを取得および置換するために使用されます。正規表現は、文字列のパターン マッチングを実行するための強力なツールです。
1.2 正規表現の役割
正規表現は主にクライアントの入力データを検証するために使用されます。
ユーザーがフォームに入力してボタンをクリックすると、フォームはサーバー側で通常、PHP、ASP.NET、JSP などのサーバー スクリプトを使用してさらに処理されます。クライアント側の検証により、サーバー側のシステム リソースが大幅に節約され、より良いユーザー エクスペリエンスが提供されます。
2. 正規表現を作成します==(123)==
正規表現を使用するには、まず正規表現オブジェクトを作成する必要があります:
2.1 方法 1: Word new created
var patt = new RegExp(pattern,modifiers);
パラメータ 1: 正規表現パターンを使用します。文字列形式
パラメータ 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>
2.2 方法 2: 正規表現の直接数量を使用します
var pa = /pattern/modifiers;
2 つ/中央の正規表現パターン、最後の /パターン修飾子が続きます
例: 上記の例は次のように記述できます 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
g: グローバルを意味します。これは、文字列が複数回一致することを意味します。 g が書かれていない場合は一度だけ一致し、一度一致すると再度一致しません
i: 大文字小文字を無視することを示します。これは、マッチングで大文字と小文字が区別されないことを意味します
u: 複数の行がマッチングできることを示します。
4. 正規表現メソッドの詳しい説明==(127)==
よく使われる正規表現メソッドはtest()とexec()です
4.1 test()メソッド
test(String)
パラメータ: 照合する文字列
戻り値: 照合が成功した場合は true、失敗した場合は false を返します
ターゲット文字列が特定のパターンに一致するかどうかだけを知りたいが、そのパターンを知る必要はない場合テキストコンテンツ この場合、この方法を使用すると非常に便利です。したがって、test() メソッドは if ステートメントでよく使用されます。
<script type="text/javascript">
var pa = /girl/gi;
if(pa.test("厉害了我的girl")){
alert("这个女孩和你很配");
}else {
alert("你注定没有女孩去匹配");
}
</script>
4.2 exec()メソッド
exec(string): このメソッドは、グループをキャプチャするために特別に設計されています
パラメータ: 照合する文字列
戻り値: 配列を返します。一致するものがない場合は、null を返します
戻り値の配列に関する注意:
これは確かに Array のインスタンスです。
ただし、この配列には、index と input という 2 つの追加属性があります
Index: ソース文字列内の一致した文字列のインデックスを表します
input: 一致したソース文字列を表します。
配列の最初の項目はパターン全体に一致する文字列であり、他の項目はパターン内のキャプチャ グループに一致する文字列です
キャプチャ グループがない場合、配列には最初の項目のみが存在します。グループのキャプチャの概念については後ほど説明します
<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>
以上所述是小编给大家介绍的JS基础系列之正则表达式，更多相关内容请关注PHP中文网（www.php.cn）！