HTML パターン属性正規表現で「文字クラス内の文字が無効です」エラーがスローされるのはなぜですか?

パターン属性の問題: HTML の正規表現による妥当性の解決

HTML でパターン属性を使用すると、指定時にエラーが発生する可能性があります「u」フラグでは機能するが、「v」フラグでは機能しない正規表現パターン。この記事では、この問題を詳しく掘り下げ、解決策を示します。

問題

HTML で pattern 属性を使用しているときに、次のコンソール警告が表示される場合があります:

Pattern attribute value ^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+$ is valid with the RegExp u flag, but not with the v flag:
Uncaught SyntaxError: Invalid regular expression: /^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+$/v: Invalid character in character class.

説明

ECMAScript 2018 で導入された「v」フラグは、HTML 要素のパターン属性で使用するために RegExp オブジェクトをコンパイルするときに自動的に適用されます。これは、指定されたパターンが「v」フラグが有効になった正規表現に変換されることを意味します。

「v」フラグはエスケープ ルールに追加の制限を適用します。 「u」フラグとは異なり、「v」フラグでは、文字クラスの末尾にリテラルの「-」をエスケープせずに残すことができません。これは、「v」フラグが文字クラスの減算と交差をサポートしており、エスケープされていない「-」と競合する可能性があるためです。

解決策

この問題を解決するには、次のことを確認してください。 「v」フラグを使用すると、文字クラスの末尾の「-」がエスケープされます。たとえば、パターンの修正バージョンは次のようになります。

^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+$

追加メモ

• 「u」フラグを使用する場合、制限はありません。 「-」文字をエスケープする場合。
• 「v」フラグを使用して無効なパターンを使用するとスローされるエラーは、デバッグに役立ちます。
• 作成時に「v」フラグを明示的に指定できます。 RegExp オブジェクトですが、それをサポートしていない古いブラウザを対象とする場合は、その使用を推奨しません。

以上がHTML パターン属性正規表現で「文字クラス内の文字が無効です」エラーがスローされるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。