この記事は、JS 正規表現の使用方法をすぐに理解するのに役立ちます。

JavaScript で正規表現を使用するにはどうすればよいですか?次の記事では、JavaScript の正規表現の使い方について詳しく説明していますので、お役に立てれば幸いです。

#I. 序章: JavaScript における正規表現の使用シナリオ

このブログでは、正規表現の使用方法を理解します。 JavaScript 正規表現では、まず、序文の「序文」の部分で、なぜこの記事があるのか​​を説明します。

「序文の序文」 :

まず第一に、

この種の記事 (js 正規表現) はサイト c または IT フォーラム全体の多くの人々によって書かれており、私の意見の違いは次のとおりであると考えています。記事は、より「初心者」であるということです。「Hua、これは私の一貫したスタイルにも関係しているかもしれません。

JavaScript の正規表現に関しては、

他の記事のほとんどは冒頭が過激すぎて、初心者の学習には役立たない (これが私がやめるよう説得された方法です) 、つまりなぜ私がこの記事を書き続けなければならないのか この記事を読んだ後、JavaScript 正規表現を完全にマスターできるかどうかは別として、少なくとも JavaScript 正規表現について深い印象を持つことができれば幸いです。 [推奨学習: JavaScript ビデオ チュートリアル ]

それでは、正式に序文に入りましょう。まず、なぜ

が JavaScript Regular に含まれるのかを理解しましょう。他のプログラミング言語を以前に学習したことがある場合は、正規表現について一般的に理解しているはずですが、まだ学習していない場合でも、心配する必要はありません:

正規表現 現地語での表現は、

入力内容がデザイナーの仕様を満たしているかどうかを判断できる表現です

現地語で聞くと難しくありません。次の機能があることを確認します:

1️⃣

文字列が準拠しているかどうかをテスト

この機能は、フロントエンド入力フィールド#が正しいかどうかを検出するためによく使用されます。 ## は要件を満たしています。

一般的なシナリオは、登録時にアカウント番号、パスワード、メールアドレスなどを入力するテストです。

2️⃣

特定のテキストを置換

この機能を使用すると、js を使用して既存のテキストをバッチで置換できます。 text with the text we need. 多くのシナリオがあるため、1 つずつ例を示しません。

3️⃣ 文字列から部分文字列を抽出する/文字列に特定の部分文字列が含まれるかどうかを確認する

最後の機能はあまり使用されませんが、実際に実装できます:抽出要件を設定して、長い文字列から部分文字列をバッチで抽出します。 2 番目の機能は、

に特定の部分文字列が含まれているかどうかで、一部の文字列

をフィルターするために使用できます。 上記はフロントエンドでの正規表現の役割です。実際、正規表現はフロントエンドで使用されるだけでなく、多くの場合、他のテキストの一致や置換にも使用できます。 (つまり、js で学習しました。思考に重点が置かれているため、使用法は他の言語でも簡単に習得できます). フロントエンドでは、上記の最初の関数で動作することが多くなります:

入力フィールドを検証する

。 II. 最初の正規表現を作成する

---

まずは、実際のテクノロジーを見てみましょう。最初の正規表現を書いてみましょうjs での表現 私たちに属する正規表現 :

var  regexp_1 = /a/;
var  regexp_2 = new Regexp("a");

上記では 2 つの書き方をあげましたが、この 2 つの書き方のうち、 1 つ目の書き方がよく使われます 、

1 つは 2 つ目と完全に同等です

、両方とも 正規表現を作成します (コード内の文字列が 2 つのスラッシュで囲まれていることがわかったら、もう疑う必要はありません。これは正規表現です! )。 はい、正規表現の作成方法です。非常に簡単で高度ではありませんか?上記で作成した正規表現は、文字「a」に一致するという の意味を表しており、特別な一致ルール はありません。

単なる という単純な式 を見ないでください。実際、

は既に使用できます

。次の例を見てみましょう:

<script>
   function demo() {
        var regexp_1 = /a/;
        var str = 'abc'
        alert(regexp_1.test(str))
    }
   demo()
</script>

上記は小さな例です。もちろん 内部のテスト関数についてはまだ話していないので心配する必要はありません しかし、誰もが覚えているでしょう:

test函数是正则表达式最基础的一个函数，作用是对传入的字符串进行固定格式、内容的匹配。(后面部分会再点到这个函数)

这里我们了解一下我们写的正则表达式是可以被使用的，因为上面的代码就涉及了一个简单的正则表达式的使用。

---

III. 常见的正则表达式属性

? 三种匹配规则

首先介绍一下正则表达式的三种匹配规则：

匹配规则符号	规则含义
i	匹配时忽略大小写
g	执行全局匹配(会匹配整个语句，而非匹配到第一个目标后终止)
m	执行多行匹配

它们的语法是这样的：

var  regexp_1 = /a/i;
var  regexp_2 = /a/g;
var  regexp_3 = /a/m;

var  regexp_4 = new Regexp("a","i"); 
var  regexp_5 = new Regexp("a","g"); 
var  regexp_6 = new Regexp("a","m"); 

var  regexp_7 = new Regexp("a","igm"); 
var  regexp_8 = /a/igm;

上面展示了两种正则表达式定义方法下的匹配规则的语法：

对于第一种正则表达式，我们直接在斜线后加上匹配规则对应的符号即可；

对于第二种正则表达式，我们在括号里传入第二个参数即可，参数仍然是对应的符号；

补充：其实不传入参数、斜线后面不写任何东西，代表了默认情况，也就是普通的正则匹配。

最后要说明的是，可以有多种规则同时执行，例如可以同时忽略大小写、全局匹配(需要几个就加几个参数符号)。

我们拿忽略大小写做一个小demo：

<script>
    function demo() {
        var regexp_1 = /a/;
        var regexp_2 = /a/i;
        var str = 'Abc'
        alert(regexp_1.test(str))
        alert(regexp_2.test(str))
    }
    demo()
</script>

其中，第一个弹窗是False，第二个是True，大家也可以点这里试验一下：【点我揭晓】

---

? 五种常见属性

接下来，我们讲解一下五种常见的正则表达式的属性：

啥，你问我啥叫正则表达式的五种属性？就是 /a/ 的五种属性，这句话就是这么理解的，也就是这个表达式会有五种属性，它们分别是：

属性	说明
ignoreCase	返回一个布尔值，True代表正则表达式设置了 i 匹配规则(忽略大小写)，False代表未设置。
global	返回一个布尔值，True代表正则表达式设置了 g 匹配规则(全局匹配)，False代表未设置。
multiline	返回一个布尔值，True代表正则表达式设置了 m 匹配规则(多行匹配)，False代表未设置。
lastIndex	返回一个int值，表示下一次搜索开始的索引位置，只在设置了 g 匹配规则时才有实用意义。
source	返回一个字符串，字符串是正则表达式的字符串形式(不含斜线)

除了lastIndex，其他四个大家应该都能从字面理解，关于lastIndex，我会在下一个部分单独介绍它。

---

? 规则g的使用详解

最后，由于规则g：全局匹配，不容易理解，我们单独拿出来讲一讲，而且讲g的同时，顺便把上面提到的lastIndex也一起讲了：

我们先看这样一个字符串：

str = 's_s_s_s_s_s_s_s'

假如目标是匹配s，那么使用普通的正则表达式，例如：

regexp = '/s/'

我们确实匹配了，但是只匹配了第一个s，换句话说没有把所有的s匹配到，那么如果我们想要把整个句子里的s都匹配一下，这时 g 就发挥作用了：

我们现在有需求：匹配每一个s，并依次输出s的索引，此时我们的第一步是定义一个g模式的正则表达式：

var regexp = '/x/g'

那么索引要怎么办呢？哎这时候就用到了lastIndex，还记得吗，它代表了下一次正则表达式匹配的起始索引：

<script>
    function demo() {
        var regexp = /s/g
        var str = 's_s_s_s_s_s_s_s'
        regexp.test(str)
        alert(regexp.lastIndex)
        regexp.test(str)
        alert(regexp.lastIndex)
        regexp.test(str)
        alert(regexp.lastIndex)
        regexp.test(str)
        alert(regexp.lastIndex)
        regexp.test(str)
        alert(regexp.lastIndex)
        }
    demo()
</script>

此时，我们就实现了索引的获取(注意，这里弹出的并不是索引，是索引加一，减去一就是真正的索引)

---

IV. 常见的正则表达式方法举例介绍

? test方法

首先当然是我们最常用的test()方法了，它有以下功能：

test() 方法是正则表达式最常用一个方法，用于检测一个字符串是否匹配某个模式.

test ()方法检查字符串是否与给出的正则表达式模式相匹配，如果是则返回 true，否则就返回 false，这一点在刚才上面的小案例里，大家都有体会。

同时搭配g模式，test方法也可以进行全文的检查，上面的demo也有提到，这里不过多赘述。它的标准语法格式是这样的：

var regexp = /xxx/
var str = 'xxx'
var boolean_value = regexp.test(regexp)

---

? 正则子表达式匹配

在讲exec()方法之前，我们插播一个知识点：子表达式匹配。

什么意思呢？我们观察一下之前写的正则表达式，都是一整个式子进行匹配，那么有没有可以在一个式子里有一些子式子的写法呢？大家可能到这儿没有太理解子表达式的意思，那我举个例子：

现在有这样一个式子：

str = 'st_s_s_s_s_s_s_s'

我想要先匹配 st_ 这个字符串，那么正则表达式大家都会写：

var regexp = /st_/

那如果我接下来想要，先匹配一下st_，匹配到之后再匹配一下里面的 t 和 _ ，也就是我想要一次把st_  、t 和 _ 都匹配出来，要怎么办呢？这样写就可以了：

var regexp = /s(t)(_)/

于是我们知道了，括号的内容代表子表达式，而且在第一次匹配时，它会默认把所有的括号去掉，做一个整体匹配，例如上面的例子，第一波匹配时，表达式相当于是： /st_/ 。

只有整体匹配成功，后面的子字符串匹配才会被执行匹配，否则如果整体没有匹配到，即使子字符串能匹配到内容，也都会被返回空值。(这句话先不用理解，下面的exec()方法会再讲)

---

? exec方法

exec()方法，比普通的test()方法更加复杂，同时能做的事情也更复杂：

exec() 方法用于检索字符串中的正则表达式的匹配。

exec()方法返回的是一个字符串的数组：

当整句匹配失败时，会返回一个null的空数组；

否则，有：数组的第0个元素存储的是整句匹配到的字符串，第1个元素存放的是第一个引用型分组(子表达式)匹配的字符串，第2个元素存放的是第二个引用型分组(子表达式)匹配的字符串，依次类推。

看到这里，我要开始填坑了：刚才提到了如果整句匹配失败，那么即使子字符串能够成功匹配，也会被返回空值，是什么意思呢？我们举一个例子，看下面的代码：

<script>
    function demo() {
        var regexp = /s(t_)(_)/
        var str = 'st_s_s_s_s_s_s_s'
        var list = regexp.exec(str)
        document.write(list[0])
        document.write('<br>')
        document.write(list[1])
        document.write('<br>')
        document.write(list[2])
    }
    demo()
</script>

这段代码大家现在肯定能看懂，那么有奖竞猜：上面代码执行之后，页面上会被写什么内容？

答案是：【点我揭晓】

是不是出乎意料？啥也没有是吧？那就对了，因为这就是整句匹配失败的后果，我们解析一下：

首先，由于包含子字符串，我们第一次先整句匹配，把括号取消，那么正则表达式变成：

regexp = /st__/(注意，这里是有两个下划线的)

于是真相很明显了：st__不存在，所以整句匹配失败了，于是即便子字符串s_和_能够被匹配到，一样不会有结果，到这里我算是把这块给大家讲清楚了？

那么大家应该对exec()方法有一定了解了，那我最后举一个成功实现多匹配的例子：

<script>
    function demo() {
        var regexp = /s(t)(_)/
        var str = 'st_s_s_s_s_s_s_s'
        var list = regexp.exec(str)
        document.write(list[0])
        document.write('<br>')
        document.write(list[1])
        document.write('<br>')
        document.write(list[2])
    }
    demo()
</script>

大家发现，我只是把第一个子表达式的下划线去掉了，那么结果截然不同，这次三个内容都被写上去了，大家可以自行查看：【点我揭晓】

这里有人就很"贪心了"，可能会问list[3]是啥呀？

list[3]是undefined，因为exec()方法只会执行一次匹配，因此它在三个表达式(总式、两个子表达式)匹配之后就会停止，因此一共只有三个值。

---

? 字符串的常见函数

最后是字符串的常见函数，注意，各位别弄混了，这是字符串的常见函数，调用函数的对象是字符串，不是正则表达式，但是传参可以是正则表达式：

var str = 'xxx'

// 1. search(): 检索字符串中与指定的子字符串或正则表达式相匹配的子字符串。
// 返回找到的第一个字符的位置，如果未找到返回-1
// 该方法将忽略"g"标志和正则对象的lastIndex属性（即总是从开头找起）
var index = str.search(Regexp/String);

// 2. match(): 在字符串内查找一个或多个与正则表达式匹配的字符串，返回一个对象
// 若没开启"g"标志，将只查找第一个匹配的字符串，返回一个对象
// 该对象包含下标0、index、input，其中下标0等价于index，input是String的引用
// 开启"g"，返回一个数组，数组的length是匹配的字符串个数，每个元素是每个匹配的起始字符位置

var list = str.match(Regexp/String)

// 3.replace() : 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串

str.replace(yourRegexp/String,new_String)

---

V. 正则表达式的常见匹配语法汇总

这部分，我用一张图给大家展示一下常见的匹配语法，大家可以记住图上的一些语法，但不必都记住，需要的时候点开看就行，图大家可以自行收藏(原创，大家勿二改)：

---

VI. 实例：一个简单的注册校验

最后，给大家送一个简单的注册校验：

<!DOCTYPE html>
<html>

<head>
    <title>简单注册校验</title>
    <meta charset=&#39;utf-8&#39; />
    <style>
    </style>
    <script>
        function check() {
            var number = document.getElementById("number").value;

            if (number == "") {
                alert("手机号不能为空哦");
                return false;
            }
            if (/^[0-9][1-9]{10}$/.test(number) == false) {
                alert("手机号的格式不对");
                return false;
            }
            var pwd = document.getElementById("pwd").value;
            if (pwd == "") {
                alert("密码不能为空");
                return false;
            }
            if (pwd.length < 6) {
                alert("密码的长度太短，应大于6");
                return false;
            }
            if (pwd.length > 12) {
                alert("密码的长度太长，应该小于12");
                return false;
            }
            if (/[A-Z]/.test(pwd) == false) {
                alert("密码至少要包含一个大写字母");
                return false;
            }
            var pwd2 = document.getElementById("pwd2").value;
            if (pwd != pwd2) {
                alert("两次输入的密码不一样，请重新输入");
                return false;
            }
            return true;
        }
    </script>
</head>

<body>
    <h2 style="text-align: center;">注册账户</h2>
    <form method="post" name="myform" onsubmit="check()">
        <table align="center">
            <tr>
                <td>请填写注册手机号:</td>
                <td><input id="number" name="number" type="text" /></td>
            </tr>
            <tr>
                <td>请填写注册密码：</td>
                <td><input id="pwd" name="password" type="password"></td>
            </tr>
            <tr>
                <td>请再次输入密码：</td>
                <td><input id="pwd2" name="password" type="password"></td>
            </tr>
        </table>
        <input type="submit" name="btn" value="注册" style="display: block;margin: 0 auto;margin-top: 50px;">
    </form>
</body>

</html>

大家可以根据从文中学习到的知识点，丰富上面这个案例，可以参考一些现成的网站注册页面，做更多的校验！

更多编程相关知识，请访问：编程教学！！

以上がこの記事は、JS 正規表現の使用方法をすぐに理解するのに役立ちます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。