すべての開発者は遅かれ早かれ正規表現に出くわします。 ほぼ100％のケースで、私たちはそれらをコンパイルすることを絶対に好みません。これはプログラミングに関係しない副業だと考えています。
ほとんどの場合、この問題に初めて遭遇すると、「regexp online generator」などの検索エンジンで何かを詰まらせます。残念ながら、
Googleがすべての検索結果を
壊していることは正規表現（またはIひどくグーグル）。
しかし、この最も正規表現を作成する方法は？
最近まで、この質問には2つの答えがありました。- 正規表現のドキュメントを調べて、自分で正規表現を作成します
- 経験豊富な人に依頼してください。
今、数ヶ月の開発の後、私は3番目の答えを喜んで提示します：
»
正規表現ジェネレーター物語
むかしむかし、あるプロジェクトでは、内部ユーザーからかなり興味深い複雑な要求が寄せられました。 テクニカルサポートスタッフは、異なるユーザーの特定のフィールドに検証ルールを設定する必要がありました。 規則は頻繁かつ非常に迅速に変更する必要がありました。
他の優れた開発者と同様に、謙虚な使用人は当然、既製のソリューションを探すことから始めました。 適切なものが見つからなかったため、非常に原始的な実装を開始する必要がありました。 困難なことに、いつものように、お金も時間もありませんでした。
しかし、この問題は彼を非常に強く引き付け、そしてついに、彼はあなたに彼の労働の成果をあなたに提示することを喜んでいます。
始めましょう
まず、Webサービスを作成することにしました。 プログラマーだけでなく、プログラミングから遠く離れた人々（モデレーター/管理者）が検証のために独自のルールを作成できるように、できるだけ単純に（より多くの人々のために）したかったのです。
インターフェース自体は次のとおりです。
予想どおり、新しいユーザーはまったく何も理解していないため、入門的なインタラクティブコースを開発する必要がありました。
私は常にモーダルウィンドウとポップアップに反対しますが、この場合、それらを使用することは有用であるように思われます。 「歓迎のメッセージ」と呼ぶことができます。
そして、これがインタラクティブなコースそのもの、またはむしろその一部です。
また、入門コースを受講するか拒否するかに関係なく、個々のヒントを表示することもできます。
機能についてはどうですか？
最初に目を引くのは
「例」で 、これには理由があります。 手始めに、タスクに最も近い例を選択することを強くお勧めします。 例を正しく理解するために、間違ったオプションと正しいオプションを単純に切り替えることができます。 次に、選択した例を必要に応じて変更できます。 時間が経つにつれて、例のリストが拡張されます。
次に、それが何であるかについて来ます-生成された
正規表現 ：
ここで少し停止して、もっと伝えたいと思います。
当初から、多音節正則を作成する際にユーザーを制限しないツールを作成し、同時にインターフェイスをできるだけシンプルにすることを望んでいました。 しかし、実際には、インターフェイスが劇的に変化した回数は数え切れませんでした。 また、ジェネレーター（コア）のロジックの一部を数回書き直す必要がありました。 そして、アーキテクチャが十分に考えられていなかったからではなく、いくつかのオプションが単に考慮されなかったからです。 そして、多くのオプションがあります。
可能性についても話したいと思います。 現時点では、グループ/サブグループでレギュラーシーズンを作成し、オプションパーツ（オプション）を定義し、特定のキャラクターを指定（残りはタイプを決定）し、タイプ「任意のキャラクター」を示し、レギュラーシーズンの特定の部分の特定のキャラクターをブロックできます。 単語だけでなく、フレーズやセンテンスでもレギュラーシーズンを簡単に作成できます。 レギュラーの生成は、ラテン語とキリル文字の両方で（別々に、および一緒に）利用できます。 インターフェイスのローカライズが追加されたため、他のスクリプトの常連のサポートが計画されています。
ところで、正規表現が常に赤であることを恐れないでください。 これは間違いを象徴するものではありませんが、この非常に重要な情報に注意を向けるためだけに行われました。
次は
「テストフィールド」ですここでは、入力されたテスト値が、生成された正規表現に準拠しているかどうかがチェックされます。 そして、それは「その場で」起こります。 何も押す必要はありません。 したがって、多くのオプションをより速く、より便利に確認できます。
自動生成されたルールの説明が入力フィールドの下に表示されます。
入力されたテスト値が生成されたルール/レギュラーと一致しない場合、エラーの形式でルールの説明を持つオプションがあります：
この例は、ブロックされた文字のチェックがどのように機能するかを示しています。
- 「@」から2番目の「@」まで。
- 第2レベルドメイン名の任意の部分に「-」。
- 「-」は、第2レベルドメインの最後、シンボル「。」の直前にあります。
ルールでブロックされた文字の説明はあまり明確ではありません。 少し後に、ルールの主要部分の説明と同じ形式に縮小されます。
入力したテスト値が生成されたルール/レギュラーに対応する場合、別のブロックにルールの説明を含むオプションもあります。
ルールの一部で色の意味を明確にしたい：
- 緑 -右
- 黄色 -オプション
- 赤 -正しくない
生成された正規表現には、必要な部分だけでなく、オプションの部分も含めることができます。 また、ルールの自動記述は将来のプラグイン用に特別に作成されたものですが、このWebサービスでも優れていることがわかりました。
カーネル（UI）
最後に、最後のブロックに順番に到達しましたが、値ではありませんでした。 私はこのユニットがサービス全体の中核であると個人的に考えています。 ここで、ジェネレーターが必要な入力データをすべて受信し、それを処理して既製の結果を生成します。 ところで、すべてのロジックはクライアントでのみ実装されます。 Webサービスにはサーバーコードがまったくありません。
最初に、機械
が心を読み取れないこと、それを分析して少なくとも何らかの結果を生み出すために少なくともいくつかの情報を受け取らなければなら
ないことを理解することは非常に重要です。 例がより正確で簡潔になるほど、結果はより正確で簡潔になります。 例の順序はまったく効果がありません。
ここでは、何をどのように入力するかを非常に長く退屈に説明できますが、非常に多くの例の助けを借りて理解する方がはるかに簡単だと思われます。 そして一般に、もう1つの大きな記事には、どのように、どのように機能するかを説明する資料で十分です。
そして、あなたは生き残ることを忘れていませんでしたか？
「生成」ボタンをクリックすると、正規表現が生成されました。 これで保存できます。 念のため、ブラウザのメモリ（localstorage）のみに保存されることを明確にしたいと思います。
[保存]ボタンをクリックすると、ダイアログボックスが表示されます。
次の例のように、ルールの説明を手動で入力するか、自動の説明に切り替えることができます。 また、ルールの名前を入力する必要があります。
この機能は、将来のプラグインを想定して開発されましたが、このWebサービスでは役立ちました。
実際、例とユーザールールの場合のように、生成されたルールは保存されず、単に入力データが保存され、ルールを切り替えるたびにジェネレーターロジックがトリガーされます。 これは、ジェネレータ自体のロジックのバグを修正するときに非常に便利です。 したがって、保存されたルールでさえ、すでに修正されたジェネレーターの最新バージョンで動作します。
追加機能
私はそれらを優先しました：
- urlパラメータにデータを自動的に保存します 。 これは、「生成」ボタンをクリックした直後、または例や保存されたルールを切り替えたときに発生します。 あなたは誰かへのリンクを捨てることができ、あなたがページを開くと、別のユーザーはあなたが以前に入力したものを正確に見るでしょう。 これは非常に便利です。
- すべてのコンテンツの完全なローカライズ 。 私は既存のローカリゼーションモジュールが本当に好きではなかったので、あなたの謙虚な使用人が彼の
バイクを非常にシンプルなモジュールに作成しました。 ほんの数十行のコード。 選択した言語がUrlから読み取られ、Urlに書き込まれ、Localstorageに保存されます。 特に、新しい言語を追加するのは素晴らしいことです。 テキストは、対応する言語の1つの非常に単純なJSONファイルから取得されます。 翻訳者にファイルを渡しました-別の言語を取得しました。
- アプリケーションの新しいバージョンの通知 。 このWebサービスは1ページのWebアプリケーションです（文字通り）。 個人的な経験から、私はユーザーが数ヶ月間単一ページのアプリケーションを再起動する必要がないかもしれないことを知っています、これはちょうどいいです。 しかし、新しいバージョンがリリースされたらどうなりますか？ これについてユーザーに通知する方法は？ 「とても簡単です。」 指定された時間間隔で保存されたJSONファイルをポーリングするモジュールが開発され、記録された新しいバージョンが前のバージョンと一致しなくなるとすぐに、この通知が表示されます。
技術
これらすべてを実装することができた主な技術スタックは次のとおりです。
- TypeScript 2.0 + SystemJS
- Angular 1.5（コンポーネント付き）
- 角材1.x
- Introjs
コードは完全なAngular 2コードスタイル（デコレータを含む）で記述されているため、将来的には移行が非常に簡単になります（Material2のみを待機）。
おわりに
将来の計画には、クライアントとサーバーの両方の検証ルールをインターフェースから直接設定できる本格的なプラグインの作成が含まれます。 これは非常に便利で実用的なソリューションになると思います。 次に、このアイデアを開発し、ある種の標準「JSON Schema」に基づいて「Visual Form Builder」を作成することもできます。
同様のことをしたい場合は、私は賛成であり、アドバイスさえも助けます。 「アイデア自体は実質的に価値がなく、直接実装する価値がある」
結論として、私は少し余談をさせたいと思います。 あなたが夢想的な開発者であり、彼の仕事から高くなる記事の著者であり、特にそれがあなたに挑戦し、少なくとも他の人の問題を解決する場合、あなたはおそらく正しい軌道に乗っています。 さらに悪いことに、そのような人が不明瞭な社会的基準を満たすために、または自分自身、彼の家族を養うために退屈で愚かで日常的な仕事をするために、お金、いくらかの物質的な富を追いかけなければなりません。 単純な紙片を喜ばせるために、あなたの夢、アイデア、願望、時間を犠牲にするのは間違っているようです。 しかし同時に、この記事の著者は、今すぐにすべてを取りやめるように誰にも促しません。 誰もが自分で選択する必要があり、いつこれが本当に適切な時期になるのか。