如何快速入门VUE3.0:进入学习
相关推荐:javascript教程
正则表达式( Regular Expression,简称regexp )
用途: プロジェクト開発において、携帯電話番号の指定桁の非表示、データ収集、機密ワードのフィルタリング、フォーム検証などの機能はすべて正規表現を使用して実装できます。
適用分野:オペレーティングシステム(Unix、Linuxなど)、プログラミング言語(C、C++、Java、PHP、Python、JavaScriptなど)。
例: テキスト検索を例に挙げます。大量のテキスト内で特定の機能 (携帯電話番号など) に一致する文字列を見つけた場合、正規表現の構文に従ってこの機能を記述します。コンピューター プログラムによって認識されるパターン (パターン)、コンピューター プログラムはこのパターンに従ってテキストを照合し、ルールを満たす文字列を見つけます。
正規表現の歴史
正規表現の表現形式
開発中、正規の一致パターンに基づいて指定された文字列を検索して一致させることが必要になることがよくあります。
列内の指定された値を取得することに加えて、文字列オブジェクトの一致()メソッドは、通常のルールに従ってターゲット文字列の要件を満たすすべてのコンテンツを一致させ、それを配列の後に配列に保存することもできます。一致が成功した場合、一致が失敗した場合は false を返します。
JavaScript アプリケーションでは、正規表現を使用する前に、まず正規オブジェクトを作成する必要があります。前に説明したリテラルの作成に加えて、RegExp オブジェクトのコンストラクターを通じて作成することもできます。
通常のオブジェクトの取得をよりわかりやすくするために、特殊文字「^」、「$」、「*」、「.」、「」の一致を例に比較説明します。
コンストラクター メソッドとリテラル メソッドによって作成される通常のオブジェクトは機能的には完全に同じですが、構文の実装には特定の違いがあること
に注意してください
。前者のパターンを使用する場合は、バックスラッシュ () をエスケープする必要があります。後者のパターンを記述する場合は、区切り文字「/」内に配置し、終了区切り文字の外側に flags タグを配置する必要があります。
: 文字カテゴリを効果的に使用すると、正規表現がより簡潔で読みやすくなります。
例1:大文字、小文字、数字は「w」で直接表現できます。
ケース 2: 0 から 9 までの数値を一致させたい場合は、「d」を使用できます。
読者のキャラクターカテゴリの使用を促進するために、次の使用法と「 s」。
文字セットの表現: 「[]」は文字セットを実装できます。
文字範囲: ハイフン「-」と一緒に使用すると、指定された範囲内の文字と一致することを意味します。
反意文字: メタ文字「^」が「[]」と一緒に使用される場合、それは反意文字と呼ばれます。
特定の範囲内ではありません: "^"は「[]」と一緒に使用され、指定された文字範囲内にない文字を一致させます。
文字列 'get好TB6'.match(/pattern/g) を例として、その一般的な使用法を示します。
文字「 - 」は通常、通常のキャラクターのみを表し、
文字範囲を表すときにメタカラクターとしてのみ使用されること
に注意してください
。「-」ハイフンで表される範囲は文字エンコードの順序に従います。たとえば、「aZ」、「za」、および「a-9」はすべて無効な範囲です。
【事例】入力内容を制限する
コード実装のアイデア:
HTMLを書き込み、年(年)と月(月)のテキストボックスを設定し、クエリボタンを設定します。
操作の要素オブジェクトを取得し、フォームの送信を確認します。
年を確認してください、通常のフォーム: /^ d {4} /。 月を確認する、通常のルール: /((0?[1 - 9]) '(1 [012])) /。
テキストボックスにフォーカスが表示され、プロンプトボックスの色が削除されます。テキスト ボックスはフォーカスを失い、入力コンテンツの両端の空白を削除して検証します。
コードの実装
<!DOCTYPE html> <html> <頭> <meta charset="UTF-8"> <title>入力コンテンツを制限する</title> <スタイル> input [type = text] {width:40px; border-color:#bbb; height:25px; font-size:14px; border-radius:2px; outsline: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#56b44ef; .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;} 入力[submit] {height:80px:#4393c9; </スタイル> </head> <本文> <form id="フォーム"> 年<input type="text" name="year"> 月<input type="text" name="month"> <input type="submit" value="query"> </form> <p id="result"></p> <スクリプト> function checkyear(obj){ if(!obj.value.match(/^ d {4} $/)){ obj.style.bordercolor = 'red'; result.innerHTML = '入力エラー。年は 4 桁で表されます'; false を返します。 } result.innerhtml = ''; true を返します。 } function checkmonth(obj){ if(!obj.value.match(/^((0?[1-9])|(1 [012])$/)){ obj.style.borderColor = '赤'; result.innerhtml = '入力エラー、月は1〜12'です。 false を返します。 } result.innerHTML = ''; true を返します。 } var form.getElementbyid( 'form'); // <input> element collection form.onubmit = function(){ return checkyear(inputs.year)&& checkmonth(inputs.month); }; inputs.year.onfocus = function() { this.style.bordercolor = ''; }; inputs.month.onfocus = function(){ this.style.bordercolor = ''; }; if(!string.prototype.trim){ string.prototype.trim = function(){ return this.replace(/^[suFEFFxA0]+|[suFEFFxA0]+$/g, ''); // ufeff byte order mark; } inputs.year.onblur = function() { this.value = this.value.trim(); チェック年(この); }; inputs.month.onblur = function() { this.value = this.value.trim(); checkmonth(this); }; </script> </body> </html>
:正規表現が指定された文字列と一致するかどうかを検出します。
一致が成功した場合、test() メソッドの戻り値は true を返し、それ以外の場合は false を返します。
通常のオブジェクトの検出パターン修飾子は、
現在の通常のオブジェクトで使用されているパターン修飾子を検出し、次の一致の開始インデックスを指定するために使用されるRegexpクラスにもいくつかのプロパティがあります。
読者がこれらの属性の使用をよりよく理解するためには、以下は実証する例としてスペースの一致を使用します。
:指定されたパターンのサブストリングが最初にindexof()メソッドよりも強力に表示される位置を返すことができます。
split() メソッド: 指定された区切り文字に基づいて文字列を文字列配列に分割するために使用されます。分割された文字列配列には区切り文字は含まれません。
複数の区切り文字がある場合、文字列分割操作を完了するには、通常のオブジェクトを定義する必要があります。
場合
、split() メソッドは空の文字列を含む配列 "[""]" を返します。文字列と区切り文字が両方とも空の文字列の場合は、空の配列 "[]" が返されることに注意してください。
実践的な
パスワード強度検証
パスワード強度検証条件:
① 長さが 6 桁未満、パスワード強度なし。
②長さが 6 文字を超え、数字、文字、その他の文字が含まれており、パスワードの強度が「低」です。
and長さは6文字で、2種類の数字、文字またはその他の文字が含まれています。
and長さは6文字以上で、3種類以上の数字、文字、またはその他の文字が含まれている場合、パスワードの強度は「高」です。
質問をします:6連続桁「458925」などの連続したキャラクターと一致します。
ソリューション1:通常のオブジェクト/ d d d d d d/gi。
問題:繰り返される「 d」は読みやすく、書くのは面倒ではありません。
ソリューション2:予選(?、 +、 *、{})を使用して、特定の文字の連続した発生の一致を完了します。通常のオブジェクト/ d {6}/gi。
ドット文字(。)が修飾子とともに使用される場合、指定された数値範囲の任意のキャラクターと一致させることができます。
正規表現は、指定された範囲内のキャラクターをマッチするときに、貪欲なマッチングと怠zyなマッチングをサポートします。
、ブラケット文字「()」が囲むコンテンツは「サブエクスペッション」と呼ばれます。
括弧は、キャッチとケーターのマッチングを実装し、括弧が使用されない場合、キャッチとERになります。
グループ化されていない場合、グループ化後に2 cの文字を一致させることを意味します。
キャプチャ:サブエクスペッションによって一致するコンテンツをシステムのキャッシュ領域に保存するプロセス。
非キャプチャ:システムキャッシュにサブエクスペッションの一致するコンテンツを保存しないでください。これを実現するために(?:x)を使用してください。
文字列オブジェクトの交換()メソッドは、$ n(nは0より大きい正の整数である)を直接使用して、キャプチャされたコンテンツを取得し、キャプチャされたコンテンツをサブエクスペーションで置き換える操作を完了できます。
「(?:x)」を使用して、キャプチャしないマッチングを実現できます
正規表現を書くとき、正規表現でキャッシュ領域に保存されているサブエクスペッションのキャプチャコンテンツを取得する場合、「 n」を使用できます(nは0より大きい整数です)プロセスは「リバースリファレンス」です。
ゼロ幅のアサーション:サブエクスペッションによって一致するコンテンツに特定の文字セットが含まれているかどうかを見つけるために使用されるゼロ幅のサブエクスペッションマッチングを指します。
分類:フォワードプリフェッチとリバースプリフェッチに分割されますが、javaScriptではフォワードプリフェッチのみがサポートされています。つまり、キャプチャされたコンテンツが含まれているか、または含まれていない前にデータを一致させます。一致する結果には、キャプチャされたコンテンツが含まれていません。
正規表現には多くのオペレーターがいます。実際のアプリケーションでは、優先順位に従ってさまざまな演算子が一致します。高から低い順に順番に、正規表現で一般的に使用される演算子の優先順位は次のとおりです。
[ケース]コンテンツの検索と交換
コード実装のアイデア:
コード実装
<!DOCTYPE html> <html> <頭> <meta charset="UTF-8"> <title>コンテンツ検索と交換</title> <スタイル> p {float:左;} 入力{マージン:0 20px;} </スタイル> </head> <本文> フィルタリング前の<p>コンテンツ:<br> <textarea id = "pre" rows = "10" cols = "40"> </textarea> <入力id = "btn" type = "button" value = "フィルター"> </p> <p>フィルタリングコンテンツ:<br> <textarea id = "res" rows = "10" cols = "40"> </textarea> </p> <スクリプト> document.getElementById( 'btn')。onclick = function(){ //検索して交換する必要があるコンテンツルールを定義します[ u4e00- u9fa5]は、漢字var reg =/(bad)| [ u4e00- u9fa5]/giに一致することを意味します。 var str = document.getElementById( 'pre')。value; var newstr = str.replace(reg、 '*'); document.getElementById( 'res')。innerhtml = newtr; }; </script> </body> </html>
JavaScript学習チュートリアルは
、詳細については十分です。