JavaScript における正規表現の実際的な応用の詳細な説明

JavaScript における正規表現の実際的な応用の詳細な説明

実際の業務では、JavaScript の正規表現が依然として頻繁に使用されます。したがって、この部分の知識は非常に重要です。

1. 基本的な文法:

1つ目: リテラル構文

var 式 = /パターン/フラグ;

2番目: RegExpコンストラクタ構文

var pattern = /\w/gi; //リテラル​​構文 var pattern = new RegExp('\\w', 'gi'); //コンストラクタ構文、これら 2 つは同等です

ここで注意すべき点は、正規表現が動的である場合は、2 番目のオプションのみを選択できることです。

旗には3つの旗があります

g: はグローバル パターンを示します。つまり、最初の一致が見つかったときにすぐに停止するのではなく、すべての文字列にパターンが適用されます。

i: 大文字と小文字を区別しないモードを示します。つまり、一致を判断するときにパターンと文字列の大文字と小文字は無視されます。

m: 複数行モードを示します。つまり、テキストの行の末尾に達すると、次の行にパターンに一致する項目があるかどうかの検索が続行されます。

もちろん、他のフラグもありますが、それらはめったに使用されないため、詳細には説明しません。

上記の \w が何を意味するかについては、少し待ってから読み続けてください。

2. 方法

主なものは、test()、search()、match()、replace() です。もちろん、他にも多くの方法がありますが、あまり使用されていないため、ここでは詳しく説明しません。

1. test() メソッドの使用

文字列に対応する文字列が含まれているかどうかを判定する

2. search() メソッドの使用

文字列の最初の出現のインデックスを検索し、見つからない場合は -1 を返します。

3. match() メソッドの使用

一致した配列を返します

4. replace() メソッドの使用は依然として非常に一般的です

文字列と一致し、別の文字列に置き換えます

3. 表情と実戦を合わせる

1. 主張:

アサーションは、特定の条件下で一致が発生することを示します。要するに、概念が少しわかりにくいので、そのまま読み進めてください。ゆっくり続けさせてください。

キャラクター説明する
^先頭に一致
$終わりに一致する
\b単語の境界を合わせる
\B単語境界以外を一致させる

例えば

大文字と小文字を区別せずに、dog で始まり dog で終わる文字列を一致させたいです。

var pattern = /^dog$/i; //大文字と小文字を無視 console.log(pattern.test('dog')); //true
console.log(pattern.test('sdfdog'));//false
console.log(pattern.test('dog56'));//false
console.log(pattern.test('dOG'));//true
var pattern = /\b\w+/g; // グローバル マッチ。ここでの + は量指定子で、1 回以上を表します。 console.log('Hello World'.match(pattern)); // 出力 ['Hello','World']。これは match の使用方法であり、一致の配列を返します。

ここで、\b は単語の境界に一致し、\B は非単語の境界に一致します。 1 つは小文字、もう 1 つは大文字で、大文字は逆になっています。それで、これ以上言う必要はありません。

単語の境界について話しましょう。おそらく多くの人は単語の境界についてあまり明確に理解していないでしょう。

簡単に説明しましょう。例えば、「He​​llo World」という単語には、H 位置、o 位置、W 位置、d 位置の 4 つの境界があります。

2. キャラクタークラス:

メタ文字説明する
改行文字と行末文字を除く単一の文字を検索します
\w [A-Za-z0-9_]に相当する単語文字を検索します
\W [^A-Za-z0-9_]に相当する非単語文字を検索します。
以下の反意語はリストに表示されなくなりました。
\d [0-9]に相当する数字を検索します
\s空白文字を検索する
\0 NULL文字を見つける
\n改行を見つける
\fページ区切りを見つける
\r改行コードを見つける
\tタブ文字を検索
\v垂直タブ文字を検索する

3. 範囲:

キャラクター説明する
[abc] a、b、cの任意の文字に一致します
[^abc] a、b、c以外の文字に一致します
[0-9] 0~9 の範囲の任意の数字に一致します。同様に、[az] は az の範囲の任意の文字に一致します。
[あず] aからzまでの任意の文字に一致します
x|y xまたはyに一致する

4. 数量詞:

キャラクター説明する
n+少なくとも1文字nを含む文字列に一致します
いいえ* 0個以上のnを含む文字列に一致します
ん? 0個または1個のnを含む文字列に一致します
ネクサスx nを含む文字列に一致します
y は y の 1 乗です。少なくとも x 文字、最大で y n 文字の文字列に一致します。

4. 拡大

10から36までの数字に一致します

var パターン = /1[2-9]|[2-3][0-9]|4[0-6]/;//12-46

console.log(pattern.test(11));//false
console.log(pattern.test(12));//true
console.log(pattern.test(20));//true
console.log(pattern.test(36));//true
console.log(pattern.test(46));//true
console.log(pattern.test(47));//false

「Hello, World! Hello」のHelloをWelcomeに置き換える

ここでは、正規表現での replace メソッドの使用に重点を置きます。これは、実際には非常に頻繁に使用されるためです。旗に g を追加するか追加しないかでは大きな違いがあります。

var パターン = /Hello/g;

var oldString = 'Hello,World!Hello';
var newString = oldString.replace(パターン、'Welcome');
console.log(newString);//ようこそ、世界よ!ようこそ

要約する

JavaScript における正規表現の実践的な応用に関するこの記事はこれで終わりです。より関連性の高い JavaScript 正規表現については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Javascript における一般的な正規表現の適用に関する簡単な説明
  • JavaScript における正規表現の概念と応用
  • JavaScript正規表現の複数行属性の応用
  • JSアプリケーションの正規表現変換例
  • js 正規表現置換アプリケーションケースの説明
  • Javascript における正規表現の適用の詳細な説明

<<:  MySQLで論理SQLを置き換える際の落とし穴を回避する方法の詳細な説明

>>:  開発者とオペレーターが注目すべき Linux デバッグ ツール [推奨]

推薦する

React仮想リストの実装

目次1. 背景2. バーチャルリストとは何か3. 関連概念の紹介4. 仮想リストの実装4.1 ドライ...

ウェブデザインにおけるキーワード設計手法の紹介

多くの場合、ホームページを作成するときに、Web ページ ヘッダー属性の設定を無視します。 Web ...

CSS3 transition-delay属性のデフォルト値が単位なしの0であり無効である問題を解決します

今日は、CSS3 の transition-delay 属性のデフォルト値 0 に単位がないのは無効...

Windows 10 で MySQL を完全に削除してアンインストールする方法

序文この記事では、Windows 10 システムで MySQL を完全に削除してアンインストールする...

JS で美しい条件式を書く方法についての簡単な説明

目次複数の条件文複数属性オブジェクトスイッチステートメントを置き換えるデフォルトパラメータとデストラ...

Vueでルーティング権限を動的に設定する主なアイデア

以前、インターネット上で動的ルーティング設定をいくつか見たことがありましたが、現在のプロジェクトとは...

IISとAPACHEはHTTPSへのHTTPリダイレクトを実装しています

7 のMicrosoft の公式 Web サイトから HTTP Rewrite モジュールをダウンロ...

CSS 標準: vertical-align プロパティ

<br />原文: http://www.mikkolee.com/13私は最近、ver...

Linux システム (CentOS7 インストール) に JDK8 をインストールするための詳細なチュートリアル

JDKのインストールシステムのインストールについてはあまり詳しく説明しません。インストール手順はオン...

フロントエンド開発者は毎日HTMLタグの理解を学ばなければならない(1)

2.1 セマンティクス化により、Webページが検索エンジンに理解されやすくなりますこの章では、We...

overflow:hidden の役割の詳細な説明 (オーバーフローの非表示、フロートのクリア、マージンの崩壊の解決)

1. オーバーフロー:非表示 オーバーフロー非表示要素に overflow:hidden が設定さ...

デザイン参考 WordPressウェブサイト構築成功事例

これら 16 のサイトはそれぞれ注意深く読む価値があり、どのサイトでも推奨されている Web サイト...

Quill エディタでカスタム HTML レコードを挿入する詳細な例

もう2020年です。飢えた人間は単純なテキストでは満足できなくなり、さまざまなスタイルの派手なテキス...

JavaScript はマウスのドラッグを実装して div のサイズを調整します

この記事では、マウスをドラッグしてdivのサイズを調整するJavaScriptの具体的なコードを参考...

antd+reactプロジェクトをviteに移行するためのソリューションの詳細な説明

Antd+react+webpackは、多くの場合、Reactテクノロジースタックに基づくフロントエ...