検索
ホームページウェブフロントエンドjsチュートリアルJavascript_正規表現における正規表現の使用法と基本構文

正規表現 (正規表現) は、単純な言語の文法仕様であり、実際の開発プロセスでは、正規表現 が非常に重要な役割を果たします。学んで理解するのも難しいです。今日は編集者と一緒に見てみましょう! !

前の単語 正規表現は人々の頭の中では理解できない文字の集まりかもしれませんが、文字列に対する効率的な操作を可能にするのはこれらの記号です。よくあることですが、問題自体は複雑ではありませんが、正規表現がないことが大きな問題になります。 JavaScriptの正規表現は非常に重要な知識です

定義 正規表現(正規表現)は、強力で便利な、単純な言語の文法仕様です。効率的なテキスト処理ツール。文字列内の情報の検索、置換、抽出操作を実装するためにいくつかのメソッドで使用されます。

JavaScript の正規表現は RegExp オブジェクトによって表されます。1 つはリテラルの書き込みメソッドです。もう 1 つはコンストラクターの記述方法です

正規表現は、JavaScript で使用できる場所がたくさんあります。この記事では、正規表現の基本と Javascript での正規表現の使い方について説明します。

最初のパートでは JavaScript における正規表現の使用シナリオを簡単にリストし、後半では正規表現の基礎知識を詳しく紹介し、理解しやすいようにいくつかの例を書きます。

この記事の内容は、Rhino書籍の正規表現の書き方とjs正規表現の章を読んで私なりにまとめたものですので、内容に漏れや不正確な点がある可能性があります。専門家が通りかかり、記事に間違いを見つけた場合は、遠慮なく修正してください。

Javascript での正規表現の使用 正規表現は、文字の断片の特徴的な記述として考えることができ、その機能は、文字列の束から条件を満たす部分文字列を見つけることです。たとえば、JavaScript で正規表現を定義します。

var reg=/hello/  或者 var reg=new RegExp("hello")

この正規表現を使用して、一連の文字列から hello という単語を検索できます。 「検索」アクションの結果は、最初の hello の位置の検索、hello の別の文字列への置き換え、すべての hello の検索などになります。以下に JavaScript で正規表現を使用できる関数のリストを示します。これらの関数の機能については、後半でさらに複雑な使用法を紹介します。

String.prototype.searchメソッド

は、元の文字列内で部分文字列が最初に出現するインデックスを検索するために使用されます。そうでない場合は、-1

"abchello".search(/hello/); // 3


String.prototypeを返します。 replace メソッド

は、文字列

"abchello".replace(/hello/,"hi");  // "abchi"

String.prototype.split メソッド

を分割するために使用されます

String.proto type.match メソッド

は、文字列内の部分文字列を配列にキャプチャするために使用されます。デフォルトでは、1 つの結果のみが配列にキャプチャされます。正規表現に「グローバル キャプチャ」属性がある場合 (正規表現を定義するときにパラメーター g を追加します)、すべての結果が配列

"abchelloasdasdhelloasd".split(/hello/); //["abc", "asdasd", "asd"]

としてキャプチャされます。 match match メソッドは、パラメータの正規表現にグローバル属性があるかどうかに応じて動作が異なります。これについては、正規表現のグループ化で後述します。

RegExp.prototype.testメソッド

は、文字列に部分文字列が含まれているかどうかをテストするために使用されます

"abchelloasdasdhelloasd".match(/hello/); //["hello"]
"abchelloasdasdhelloasd".match(/hello/g); //["hello","hello"]

RegExp.prototype.execメソッド

は、文字列のmatchメソッドと似ています。も条件を満たす文字列を文字列から配列に取り込みますが、2 つの違いがあります。

1. exec メソッドは、正規表現にグローバル属性があるかどうかに関係なく、一度に部分文字列のみを配列にキャプチャできます

/hello/.test("abchello"); // true

2. 正規表現オブジェクト (つまり、JavaScript の RegExp オブジェクト) lastIndex 属性は、次回どこからキャプチャを開始するかを示すために使用されます。 exec メソッドが実行されるたびに、一致する文字が見つからず null が返されるまで lastIndex がプッシュバックされ、その後キャプチャが開始されます。始まり。 このプロパティは、キャプチャされた文字列内の部分文字列を反復処理するために使用できます。

var reg=/hello/g;
reg.exec("abchelloasdasdhelloasd");  // ["hello"]

正規表現の基本

メタキャラクター

上記の最初のセクションでは例として /hello/ を取り上げていますが、実際のアプリケーションでは次のような要件が発生する可能性があります。一致しない 番号、一致の開始位置、一致の終了位置、および一致する空白文字を特定します。ここでメタキャラクターを使用できます。

メタキャラクター:

var reg=/hello/g;
reg.lastIndex; //0
reg.exec("abchelloasdasdhelloasd"); // ["hello"]
reg.lastIndex; //8
reg.exec("abchelloasdasdhelloasd"); // ["hello"]
reg.lastIndex; //19
reg.exec("abchelloasdasdhelloasd"); // null
reg.lastIndex; //0

例えば、上記の小文字を大文字に変更して書かれた反意語メタキャラクターは、数字ではないすべての文字に一致します: D

另外还有一些用来表示重复的元字符,会在下面的内容中介绍。

字符范围

在 [] 中使用符号 -  ,可以用来表示字符范围。如:

// 匹配字母 a-z 之间所有字母
/[a-z]/
// 匹配Unicode中 数字 0 到 字母 z 之间的所有字符
/[0-z]/ 
// unicode编码查询地址:
//https://en.wikibooks.org/wiki/Unicode/Character_reference/0000-0FFF
//根据上面的内容,我们可以找出汉字的Unicode编码范围是 \u4E00 到 \u9FA5,所以我们可以写一个正则表达式来判断一个字符串中是否有汉字
/[\u4E00-\u9FA5]/.test("测试"); // true

重复 & 贪婪与懒惰

首先来讲重复,当我们希望匹配一些重复的字符时,就需要用到一些和重复相关的正则表达式,写法如下

//重复n次 {n}
"test12".match(/test\d{3}/); // null
"test123".match(/test\d{3}/); // ["test123"]
//重复n次或更多次 {n,}
"test123".match(/test\d{3,}/); // ["test123"]
//重复n到m次
"test12".match(/test\d{3,5}/); // null
"test12345".match(/test\d{3,5}/); // ["test12345"]
"test12345678".match(/test\d{3,5}/); // ["test12345"]
// 匹配字符test后边跟着数字,数字重复0次或多次
"test".match(/test\d*/); // ["test"]
"test123".match(/test\d*/); // ["test123"]
//重复一次或多次
"test".match(/test\d+/) ; // null
"test1".match(/test\d*/); //["test1"]
//重复一次或0次
"test".match(/test\d?/) ; // null
"test1".match(/test\d?/); //["test1"]

从上面的结果可以看到,字符test后边跟着的数字可以重复0次或多次时,正则表达式捕获的子字符串会返回尽量多的数字,比如/test\d*/匹配 test123 ,返回的是test123,而不是test或者test12。

正则表达式捕获字符串时,在满足条件的情况下捕获尽可能多的字符串,这就是所谓的“贪婪模式”。

对应的”懒惰模式“,就是在满足条件的情况下捕获尽可能少的字符串,使用懒惰模式的方法,就是在字符重复标识后面加上一个 "?",写法如下

// 数字重复3~5次,满足条件的情况下返回尽可能少的数字
"test12345".match(/test\d{3,5}?/); //["test123"]
// 数字重复1次或更多,满足条件的情况下只返回一个数字
"test12345".match(/test\d+?/); // ["test1"]

字符转义

在正则表达式中元字符是有特殊的含义的,当我们要匹配元字符本身时,就需要用到字符转义,比如:

/\./.test("."); // true

分组 & 分支条件

正则表达式可以用 " ()  " 来进行分组,具有分组的正则表达式除了正则表达式整体会匹配子字符串外,分组中的正则表达式片段也会匹配字符串。

分组按照嵌套关系和前后关系,每个分组会分配得到一个数字组号,在一些场景中可以用组号来使用分组。

在 replace、match、exec函数中,分组都能体现不同的功能。

replace函数中,第二个参数里边可以用 $+数字组号来指代第几个分组的内容,如:

" the best language in the world is java ".replace(/(java)/,"$1script"); // " the best language in the world is javascript "
"/static/app1/js/index.js".replace(/(\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js/index-v0.0.1.js"    (\/\w+)分组匹配的就是 /index ,

在第二个参数中为其添加上版本号

match函数中,当正则表达式有全局属性时,会捕获所有满足正则表达式的子字符串

"abchellodefhellog".match(/h(ell)o/g); //["hello", "hello"]

但是当正则表达式没有全局属性,且正则表达式中有分组的时候,match函数只会返回整个正则表达式匹配的第一个结果,同时会将分组匹配到的字符串也放入结果数组中:

"abchellodefhellog".match(/h(ell)o/); //["hello", "ell"]
// 我们可以用match函数来分解url,获取协议、host、path、查询字符串等信息
"http://www.baidu.com/test?t=5".match(/^((\w+):\/\/([\w\.]+))\/([^?]+)\?(\S+)$/);
// ["http://www.baidu.com/test?t=5", "http://www.baidu.com", "http", "www.baidu.com", "test", "t=5"]

exec函数在正则表达式中有分组的情况下,表现和match函数很像,只是无论正则表达式是否有全局属性,exec函数都只返回一个结果,并捕获分组的结果

/h(ell)o/g.exec("abchellodefhellog"); //["hello", "ell"]

当正则表达式需要匹配几种类型的结果时,可以用到分支条件,例如

"asdasd hi asdad hello asdasd".replace(/hi|hello/,"nihao"); //"asdasd nihao asdad hello asdasd"
"asdasd hi asdad hello asdasd".split(/hi|hello/); //["asdasd ", " asdad ", " asdasd"]

 注意,分支条件影响它两边的所有内容, 比如 hi|hello  匹配的是hi或者hello,而不是 hiello 或者 hhello

分组中的分支条件不会影响分组外的内容

"abc acd bbc bcd ".match(/(a|b)bc/g); //["abc", "bbc"]

后向引用

正则表达式的分组可以在其后边的语句中通过  \+数字组号来引用

比如

// 匹配重复的单词
/(\b[a-zA-Z]+\b)\s+\1/.exec(" asd sf hello hello asd"); //["hello hello", "hello"]

断言

 (?:exp) , 用此方式定义的分组,正则表达式会匹配分组中的内容,但是不再给此分组分配组号,此分组在replace、match等函数中的作用也会消失,效果如下:

/(hello)\sworld/.exec("asdadasd hello world asdasd") // ["hello world", "hello"],正常捕获结果字符串和分组字符串
/(?:hello)\sworld/.exec("asdadasd hello world asdasd") // ["hello world"]
"/static/app1/js/index.js".replace(/(\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js/index-v0.0.1.js"
"/static/app1/js/index.js".replace(/(?:\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js$1-v0.0.1.js"

(?=exp) 这个分组用在正则表达式的后面,用来捕获exp前面的字符,分组中的内容不会被捕获,也不分配组号

/hello\s(?=world)/.exec("asdadasd hello world asdasd") // ["hello "]

(?!exp)  和前面的断言相反,用在正则表达式的后面,捕获后面不是exp的字符,同样不捕获分组的内容,也不分配组号

/hello\s(?!world)/.exec("asdadasd hello world asdasd") //null

处理选项

javascript中正则表达式支持的正则表达式有三个,g、i、m,分别代表全局匹配、忽略大小写、多行模式。三种属性可以自由组合共存。

// 全局匹配 g 
"abchelloasdasdhelloasd".match(/hello/); //["hello"]
"abchelloasdasdhelloasd".match(/hello/g); //["hello","hello"]
//忽略大小写 i
"abchelloasdasdHelloasd".match(/hello/g); //["hello"]
"abchelloasdasdHelloasd".match(/hello/gi); //["hello","Hello"]

在默认的模式下,元字符 ^ 和 $ 分别匹配字符串的开头和结尾处,模式 m 改变了这俩元字符的定义,让他们匹配一行的开头和结尾

"aadasd\nbasdc".match(/^[a-z]+$/g); //null 字符串^和$之间有换行符,匹配不上 [a-z]+ ,故返回null
"aadasd\nbasdc".match(/^[a-z]+$/gm); // ["aadasd", "basdc"] ,改变^$的含义,让其匹配一行的开头和末尾,可以得到两行的结果

总结

以上所述是小编给大家介绍的Javascript中正则表达式的使用及基本语法,希望对大家有所帮助!!

相关推荐:

正規表現のサブパターンの詳細な分析

正規表現での最短一致パターンの使用

正規表現を使用してキーワードをマスクする方法

以上がJavascript_正規表現における正規表現の使用法と基本構文の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptエンジンの理解:実装の詳細JavaScriptエンジンの理解:実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript:学習曲線と使いやすさPython vs. JavaScript:学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript:コミュニティ、ライブラリ、リソースPython vs. JavaScript:コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ:すべてがどのように機能するかC/CからJavaScriptへ:すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン:実装の比較JavaScriptエンジン:実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール