コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

JavaScript の正規表現については、この記事で十分です

WBOY
リリース： 2022-03-21 18:02:36
転載
2973 人が閲覧しました

この記事では、javascript に関する関連知識を提供します。主に正規表現に関連する問題を紹介します。正規表現は、文字列がこの機能に一致するかどうかのさまざまな検証に使用される特定の書式設定パターンであり、高度なテキストを実装します。検索、置換、コンテンツ傍受などの操作について、皆様のお役に立てれば幸いです。

JavaScript の正規表現については、この記事で十分です

関連する推奨事項: javascript チュートリアル

正規表現とは

正規表現 (正規表現、regexp と呼ばれます)

  • は、文字列の構造を記述する文法規則です。
  • は、さまざまな文字列がこの機能に一致するかどうかを確認するために使用される特定の書式パターンです。これにより、高度なテキスト検索、置換、コンテンツの傍受、その他の操作が可能になります。

アプリケーション: プロジェクト開発では、携帯電話番号の指定桁の非表示、データ収集、機密単語のフィルタリング、フォーム検証などの機能はすべて正規表現を使用して実装できます。

適用可能な分野: オペレーティング システム (Unix、Linux など)、プログラミング言語 (C、C、Java、PHP、Python、JavaScript など)。

例: テキスト検索を例に挙げると、大量のテキストの中から特定の特徴 (携帯電話番号など) に一致する文字列を見つけた場合、その特徴をテキスト検索の構文に従って記述します。正規表現を形成するための正規表現。コンピュータ プログラムはパターン (パターン) を認識し、このパターンに従ってテキストを照合し、ルールに適合する文字列を見つけます。

正規表現の開発の歴史
JavaScript の正規表現については、この記事で十分です

正規表現の表現形式

  • One は、オペレーティング システム間の移植性を確保するために使用される POSIX 仕様に準拠した正規表現です。
  • 1 つは、Perl (多機能プログラミング言語) の開発時に Perl 正規表現が派生したということで、JavaScript の正規構文は Perl に基づいています。

正規表現の使用方法

開発では、多くの場合、正規の一致パターンに基づいて指定された文字列の検索と一致を完了する必要があります。

JavaScript の正規表現については、この記事で十分です

exec() メソッド

  • exec() メソッドは、ターゲット文字列内の一致を検索するために使用され、1 つだけを返します。一度に一致する結果。
  • たとえば、指定された文字列 str で abc を検索します。

JavaScript の正規表現については、この記事で十分です

  • 「/abc/i」の「/」は正規表現の区切り文字で、「abc」は正規表現のパターンを表します。式テキスト、「i」はパターン修飾子識別子であり、str で大文字と小文字が無視されることを示します。
  • exec() メソッドのパラメータは、照合する文字列 str です。照合に成功した場合、このメソッドの戻り値は配列になり、それ以外の場合は null が返されます。
  • exec() の戻り結果から、配列に保存された最初の要素 (AbC) が一致した文字列を表し、2 番目の要素のインデックスが一致した文字がターゲット文字列内にあることを示していることがわかります。インデックス値 (0 から計算); 3 番目のパラメーター入力はターゲット文字列 (AbC123abc456) を表します。

match() メソッド

String オブジェクトの match() メソッドは、文字列内の指定された値を取得するだけでなく、文字列内の指定された値も取得できます。 target string based on 通常の一致では、要件を満たすすべてのコンテンツが一致します。一致に成功すると、配列に保存されます。一致に失敗した場合は、false が返されます。

JavaScript の正規表現については、この記事で十分です

  • ロケーター「^」は文字列の先頭と一致するために使用できます。
  • ロケーター「$」を使用して文字列の末尾と一致させることができます。
  • g はグローバル一致を表し、最初の一致が見つかった後に検索を続けるために使用されます。

正規オブジェクトの取得

JavaScript アプリケーションでは、正規表現を使用する前に、まず正規オブジェクトを作成する必要があります。前に説明したリテラルの作成に加えて、RegExp オブジェクトのコンストラクターを通じて作成することもできます。

JavaScript の正規表現については、この記事で十分です

  • pattern は、メタ文字とリテラル文字で構成される正規表現パターン テキストです。
  • メタキャラクターは、「^」、「.」、「*」などの特別な意味を持つ文字です。
  • テキスト文字は、文字や数字などの通常のテキストです。
  • flags は、正規表現をさらに設定するために使用されるパターン変更識別子を表します。

JavaScript の正規表現については、この記事で十分です

  • モード修飾子は、実際のニーズに応じて複数の組み合わせで使用することもできます。
  • たとえば、大文字と小文字を無視してグローバルに一致させたい場合は、gi を直接使用でき、複数のパターン修飾子を記述するときに順序の要件はありません。
  • したがって、パターン修飾子を合理的に使用すると、正規表現をより簡潔かつ直感的にすることができます。

読者が通常のオブジェクトの取得をよりよく理解できるように、一致する特殊文字「^」、「$」、「*」、「.」、および「\」を考慮します。例比較して説明してください。

JavaScript の正規表現については、この記事で十分です

  • セレクタ「|」は「または」を意味し、いずれかの条件を満たしていれば検索条件が成立します。
  • JavaScript の文字列にはエスケープの問題があるため、コード内の str の「\」はバックスラッシュ「\」を表します。
  • 正規表現で特殊文字を照合する場合、特殊文字をエスケープするためにバックスラッシュ (\) も必要です。たとえば、文字列エスケープの後、「\\」は「\」になり、正規表現では「\」と一致するために「\」が使用されます。

Note

コンストラクター メソッドとリテラル メソッドによって作成される通常のオブジェクトは機能的にはまったく同じですが、構文の実装にはいくつかの違いがあります。違いは、前者のパターンを使用する場合はバックスラッシュ (\) をエスケープする必要があることです。後者のパターンを記述する場合は、区切り文字「/」内に配置し、終了区切り文字の外側に flags タグを配置する必要があります。

文字カテゴリ

利点: 文字の効果的な使用カテゴリは次のことができます。正規表現をより簡潔で読みやすくします。

例 1: 大文字、小文字、数字は「\w」を使用して直接表現できます。

ケース 2: 0 から 9 までの数値を一致させたい場合は、「\d」を使用できます。

JavaScript の正規表現については、この記事で十分です

読者が文字カテゴリの使用を理解しやすくするために、以下ではデモンストレーションの例として「.」と「\s」を使用します。

JavaScript の正規表現については、この記事で十分です

    通常のオブジェクト reg は、空白文字の後の任意の 2 文字 (改行を除く) と一致するために使用されます。
  • したがって、コンソールに表示される結果では、ID の前にスペースが表示されます。
文字セット


文字セット表現: "[]" は文字セットを実装できます。

文字範囲: ハイフン「-」と一緒に使用すると、指定された範囲内の文字と一致することを意味します。

反意文字: メタ文字「^」が「[]」と一緒に使用される場合、それは反意文字と呼ばれます。

特定の範囲内にありません: 「^」は「[]」と一緒に使用され、指定された文字範囲内にない文字と一致します。

文字列「get好TB6」.match(/pattern/g)を例として、その一般的な使用法を示します。

JavaScript の正規表現については、この記事で十分です

#注意

文字「-」は、通常の状況では通常の文字のみを表し、文字範囲を表す場合にのみ

はメタキャラクターとして使用されます。 「-」ハイフンで表される範囲は文字エンコードの順序に従います。たとえば、「a-Z」、「z-a」、および「a-9」はすべて不正な範囲です。

[事例] 入力内容を制限する

JavaScript の正規表現については、この記事で十分です
##コード実装のアイデア

:

HTMLを記述し、年(年)と月(月)のテキストボックスとクエリボタンを設定します。

操作の要素オブジェクトを取得し、フォームの送信を確認します。

検証年、通常: /^\d{4}/。月を確認します。通常のルール: / ( ( 0 ? [ 1 − 9 ] ) ∣ ( 1 [ 012 ] ) ) /。

テキスト ボックスがフォーカスを取得し、プロンプト ボックスの色が削除されます。テキスト ボックスはフォーカスを失い、入力コンテンツの両端の空白を削除して検証します。

コードの実装

	nbsp;html>
	
	
	<meta>
	<title>限定输入内容</title>
	<style>
	input[type=text]{width: 40px;border-color: #bbb;height: 25px;font-size: 14px;border-radius: 2px;outline: 0;border: #ccc 1px solid;padding: 0 10px;-webkit-transition: box-shadow .5s;margin-bottom: 15px;}
	input[type=text]:hover, input[type=text]:focus,input[type=submit]:hover{border: 1px solid #56b4ef; box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6); -webkit-transition: box-shadow .5s;}
	input::-webkit-input-placeholder {color: #999; -webkit-transition: color .5s;}
	input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder {color: #c2c2c2; -webkit-transition: color .5s;}
	input[type=submit]{height: 30px; width: 80px; background: #4393C9; border:1px solid #fff;color: #fff;font:14px bolder; }
	</style>
ログイン後にコピー
年份  月份 

<script> function checkYear(obj) { if (!obj.value.match(/^\d{4}$/)) { obj.style.borderColor = &#39;red&#39;; result.innerHTML = &#39;输入错误，年份为4位数字表示&#39;; return false; } result.innerHTML = &#39;&#39;; return true; } function checkMonth(obj) { if (!obj.value.match(/^((0?[1-9])|(1[012]))$/)) { obj.style.borderColor = &#39;red&#39;; result.innerHTML = &#39;输入错误，月份为1~12之间&#39;; return false; } result.innerHTML = &#39;&#39;; return true; } var form = document.getElementById(&#39;form&#39;); // <form>元素对象 var result = document.getElementById(&#39;result&#39;); // <p>元素对象 var inputs = document.getElementsByTagName(&#39;input&#39;); // <input>元素集合 form.onsubmit = function() { return checkYear(inputs.year) && checkMonth(inputs.month); }; inputs.year.onfocus = function() { this.style.borderColor = &#39;&#39;; }; inputs.month.onfocus = function() { this.style.borderColor = &#39;&#39;; }; if (!String.prototype.trim) { String.prototype.trim = function() { return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, &#39;&#39;); // \uFEFF字节顺序标记；\xA0不换行空白 }; } inputs.year.onblur = function() { this.value = this.value.trim(); checkYear(this); }; inputs.month.onblur = function() { this.value = this.value.trim(); checkMonth(this); }; </script> RegExp クラスのメソッドtest() メソッド: 正規表現が指定された文字列と一致するかどうかを確認します。

JavaScript の正規表現については、この記事で十分です

マッチングが成功した場合、test() メソッドの戻り値は true であり、それ以外の場合は false を返します。

通常のオブジェクトのパターン修飾子の検出

RegExp クラスには、使用されたパターン修飾子の検出に使用されるプロパティもいくつかあります。現在の通常のオブジェクトによって、次の一致の開始インデックスなどを指定します。

JavaScript の正規表現については、この記事で十分です# 読者がこれらの属性の使用をよりよく理解できるように、以下では例としてスペースの一致を示します。

JavaScript の正規表現については、この記事で十分です

String クラスのメソッド

search() メソッド: 指定されたパターンの部分文字列が最初に出現する位置を返すことができます。これは、indexOf() メソッドよりも強力です。

JavaScript の正規表現については、この記事で十分です

  • search() メソッドのパラメータは正規オブジェクトです。非正規表現オブジェクトが渡された場合、「new RegExp(受信パラメータ)」 )」を使用すると、暗黙的に正規表現オブジェクトに変換されます。
  • 一致に失敗した後の search() メソッドの戻り値は -1 です。

split() メソッド: 指定された区切り文字に基づいて文字列を文字列配列に分割するために使用されます。分割された文字列配列には区切り文字は含まれません。

複数の区切り文字がある場合、文字列分割操作を完了するには通常のオブジェクトを定義する必要があります。

JavaScript の正規表現については、この記事で十分です

  • # 文字列内の「@」と「.」の区切り文字に従って分割します。
  • split()メソッドの引数は正規表現モードで設定された区切り文字、戻り値は配列形式で保存された分割結果です。

注

文字列が空の場合、split() メソッドは空の文字列を含む配列 "[""]" を返します。文字列と区切り文字が両方とも空の文字列の場合は、空の配列 "[]" が返されます。

JavaScript の正規表現については、この記事で十分です

  • #通常の一致を使用して文字列を分割する場合、文字列の分割数を指定することもできます。
  • 文字列の分割数を指定した後、指定した数が実際の文字列のルールを満たす分割数よりも小さい場合、他の分割結果は最終的な戻り結果で無視されます。

実践演習

パスワード強度検証

パスワード強度検証条件:

① 長さ

②長さは 6 文字を超えており、数字、文字、またはその他の文字が含まれています。パスワードの強度は「低」です。

③長さは 6 文字を超え、2 種類の数字、文字、またはその他の文字が含まれており、パスワードの強度は「中」です。

④長さは 6 文字以上で、数字、文字、その他の文字が 3 種類以上含まれており、パスワードの強度は「高」です。

文字制限

文字制限 - 修飾子

質問する: 6 つの連続する数字「458925」などの連続する文字と一致します。

解決策 1: 通常のオブジェクト/\d\d\d\d\d\d/gi。

既存の問題: 繰り返される「\d」は読みにくく、書くのも面倒です。

解決策 2: 修飾子 (?、,*、{ }) を使用して、連続して出現する特定の文字の一致を完了します。通常のオブジェクト/\d{6}/gi。

JavaScript の正規表現については、この記事で十分です

文字制限 - 貪欲かつ遅延マッチング

ドット文字 (.) を修飾子とともに使用すると、指定された数の任意の文字と一致します。範囲 。

  • 例: "^hello.*world$"。
  • 説明: hello から始まり world で終わり、途中に 0 個以上の任意の文字を含む文字列と一致します。

REGULAR は、指定された範囲内の任意の文字と一致する場合に、貪欲マッチングと遅延マッチングをサポートします。

  • いわゆる貪欲とは、できるだけ多くの文字と一致することを意味し、怠惰とは、できるだけ少ない文字と一致することを意味します。デフォルトでは、貪欲なマッチングが使用されます。
  • #遅延マッチングを実現したい場合は、前の修飾子の後に「?」記号を追加する必要があります。

JavaScript の正規表現については、この記事で十分です

#括弧文字

正規表現において、括弧文字「()」で囲まれた内容を「()」と呼びます。 「部分式」。

JavaScript の正規表現については、この記事で十分です
#関数

JavaScript の正規表現については、この記事で十分です括弧はキャッチとケータの一致を実装します。括弧が使用されない場合は、 catch と er



JavaScript の正規表現については、この記事で十分です になります。グループ化されていない場合は 2 つの c 文字が一致することを意味し、グループ化された後は 2 つの "bc" 文字列が一致することを意味します。

キャプチャと非キャプチャ

キャプチャ:部分式に一致するコンテンツをシステムのキャッシュ領域に保存するプロセス。

非キャプチャ: 部分式の一致するコンテンツをシステム キャッシュに保存しません。これを実現するには (?:x) を使用します。

JavaScript の正規表現については、この記事で十分です

String对象的replace()方法，可直接利用$n（n是大于0的正整数）获取捕获内容，完成对子表达式捕获的内容进行替换的操作。

JavaScript の正規表現については、この記事で十分です

  • 第1个参数为正则表达式，用于与str字符串进行匹配，将符合规则的内容利用第2个参数设置的内容进行替换。
  • $2表示reg正则表达式中第2个子表达式被捕获的内容“Capture”。
  • $1表示第1个子表达式被捕获的内容“Regular”。
  • 返回值是替换后的新字符串，因此，并不会修改原字符串的内容。

可以使用”(?:x)”的方式实现非捕获匹配

JavaScript の正規表現については、この記事で十分です

反向引用

在编写正则表达式时，若要在正则表达式中，获取存放在缓存区内的子表达式的捕获内容，则可以使用“\n”（n是大于0的正整数）的方式引用，这个过程就是“反向引用”。

  • “\1”表示第1个子表达式的捕获内容。
  • “\2”表示第2个子表达式的捕获内容，以此类推。

JavaScript の正規表現については、この記事で十分です

  • “\d”用于匹配0~9之间的任意一个数字。
  • 为其添加圆括号“()”后，即可通过反向引用获取捕获的内容。
  • 因此，最后的匹配结果为333和666。

零宽断言

零宽断言：指的是一种零宽度的子表达式匹配，用于查找子表达式匹配的内容之前或之后是否含有特定的字符集。

分类：分为正向预查和反向预查，但是在JavaScript中仅支持正向预查，即匹配含有或不含有捕获内容之前的数据，匹配的结果中不含捕获的内容。

JavaScript の正規表現については、この記事で十分です

正则运算符优先级

正则表达式中的运算符有很多。在实际应用时，各种运算符会遵循优先级顺序进行匹配。正则表达式中常用运算符优先级，由高到低的顺序如下表。

JavaScript の正規表現については、この記事で十分です

【案例】内容查找与替换

JavaScript の正規表現については、この記事で十分です

代码实现思路：

  • 编写HTML，定义两个文本域，一个用于用户输入，另一个用于显示按照要求替换后的过滤内容。
  • 用户输入只要含有bad和任意中文字符，就利用*替换。
  • 查找并替换的内容规则：/(bad)|[\u4e00-\u9fa5]/gi。

代码实现

	nbsp;html>
	
	
	<meta>
	<title>内容查找与替换</title>
	<style>
	p{float:left;}
	input{margin:0 20px;}
	</style>
	
	
	<p>过滤前内容:<br>
	<textarea></textarea>
	<input>
	</p>
	<p>过滤后内容:<br>
	<textarea></textarea>
	</p>
	<script>
	document.getElementById(&#39;btn&#39;).onclick = function () {
	// 定义查找并需要替换的内容规则，[\u4e00-\u9fa5]表示匹配任意中文字符
	var reg = /(bad)|[\u4e00-\u9fa5]/gi;
	var str = document.getElementById(&#39;pre&#39;).value;
	var newstr = str.replace(reg, &#39;*&#39;);
	document.getElementById(&#39;res&#39;).innerHTML = newstr;
	};
	</script>
ログイン後にコピー

相关推荐：javascript学习教程

以上がJavaScript の正規表現については、この記事で十分ですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
javascript
ソース：csdn.net
前の記事：この記事では React Hooks について徹底的に理解します。 次の記事：Node.js Nest.js の AOP アーキテクチャを理解し、その利点について話す
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート