JSの最も基本的な正規表現の使い方を詳しく解説

今回は、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);

パラメータ 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()の2つです

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>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

正则表达式的{n,m}量词如何使用

正则表达式小结（实战归纳）

以上がJSの最も基本的な正規表現の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。