今回は、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>ログイン後にコピー
2.2 方法 2: 正規表現リテラルを使用する
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
g: グローバルを示します。これは、文字列が複数回一致することを意味します。 g が書かれていない場合は、一度だけ一致します。
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>ログイン後にコピー
4.2 exec()メソッド
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中文网其它相关文章！
推荐阅读：
正则表达式的{n,m}量词如何使用
正则表达式小结（实战归纳）
以上がJSの最も基本的な正規表現の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
