正規表現文字列マッチング関連
Lao Yao丨Insight プロデューサーによる「JavaScript Regular Expression Mini Book」を読んでください。この本は、乾物が含まれており、理解しやすく、グラフィックとテキストの組み合わせになっている優れた本です。 Regular は、文字の一致または位置の一致のいずれかの一致パターンです
。JavaScript 正規表現ミニブック
1. 2種類のファジィマッチング（水平ファジィ、垂直ファジィ）
水平方向の曖昧さは、規則的なパターンで一致できる文字列の長さが固定されておらず、さまざまな状況で発生する可能性があることを意味します。これを実現する方法は、数量指定子を使用することです
。たとえば、{m,n} は、少なくとも m 回、最大で n 回連続して発生することを意味します。
// 释1：表示第一个字符是'a'，第二个字符为'b'，2-5（索引）的字符只能够为'b'，后面紧接字符'c'
// 释2：{2,5}量词理解：第一个字符为'a'，后面紧接'b'出现2到5次，后面紧接字符'c'
// 其中 g 是正则的一个修饰符，表示全局匹配
let R = /ab{2,5}c/g
let string = 'abc abbc abbbc abbbbc abbbbbc abbbbbbc abdc ab1c'
string.match(R) // ['abbc', 'abbbc', 'abbbbc', 'abbbbbc']
垂直方向の曖昧さは、正規に一致する文字列が特定の文字に固有である場合、それが特定の文字ではない可能性があり、多くの可能性があることを意味します。
これを行うには、文字グループを使用します。例えば、[abc]は、その文字が「a」、「b」、「c」のいずれかの文字であることを意味します。
// 表示第一个字符是'a'，第二个字符为123数组其中的一个，后面紧接字符'c'，字符串长度为3
let R = /a[123]c/g
let string = 'a1c a2c a3c abc a123c a12c a1dc ab1c'
string.match(R) // ['a1c', 'a2c', 'a3c']
2つ目は、文字グループ（文字グループ（文字クラス）といいますが、あくまで文字の1つです）
たとえば、[abc] は文字と一致することを意味し、「a」、「b」、「c」のいずれかになります。
1. エクスプレス範囲
[1-5a-dA-D] //表示范围[12345abcdABCD]
[a-z] // 表示所有小写字母
// 正则语言中的特殊字符表达时要么放在开头，要么放在结尾，要么转义，例如要匹配"a"、"z"、"-"三者中任意字符
[a\-z]、[-az]、[az-]
2. レンジを無効にする
反意語文字グループ。最初の文字グループに ^ (キャレット文字) を入れて、否定の概念を示します。
[^abc] // 除了"a" "b" "c" 其他任意字符都满足
3. 一般的な略語
\d // 表示 [0-9]。表示是一位数字，记忆方式：其英文是 digit（数字）
\D // 表示 [^0-9]。表示除数字外的任意字符
\w // 表示 [0-9a-zA-Z_]。表示数字、大小写字母和下划线，记忆方式：w 是 word 的简写，也称单词字符
\W // 表示 [^0-9a-zA-Z_]。非单词字符
\s // 表示 [ \t\v\n\r\f]。表示空白符，包括空格、水平制表符、垂直制表符、换行符、回车符、换页符
\S // 表示 [^ \t\v\n\r\f]。 非空白符
. // 表示 [^\n\r\u2028\u2029]。通配符，表示几乎任意字符。换行符、回车符、行分隔符和段分隔符除外，记忆方式：想想省略号 … 中的每个点，都可以理解成占位符，表示任何类似的东西
任意の文字に一致させたい場合はどうすればよいでしょうか? [\d\D]、[\w\W]、[\s\S]、[^] のいずれかを使用できます。
3. 数量指定子
量指定子は繰り返しとも呼ばれます。{m,n} の正確な意味を理解した後は、いくつかの省略形を覚えておくだけで済みます。
1. 短い形式
{
m,} // 表示至少出现 m 次
{
m} // 等价于 {m,m}，表示出现 m 次。
? // 等价于 {0,1}，表示出现或者不出现
+ // 等价于 {1,}，表示出现至少一次。
* // 等价于 {0,}，表示出现任意次，有可能不出现
let R = /a{3}/ // 表示"a" 连续出现3次
let R = /\d{1,5}/ // 表示数字连续出现1到5次
let R = /c+/ // 表示至少要有一个"c"
2. 貪欲で怠惰なマッチング (書籍内の例を使用)
貪欲なマッチング
let regex = /\d{2,5}/g;
let string = "123 1234 12345 123456";
console.log( string.match(regex) );
// => ["123", "1234", "12345", "12345"]
// 其中正则 /\d{2,5}/，表示数字连续出现 2 到 5 次。会匹配 2 位、3 位、4 位、5 位连续数字
// 但是其是贪婪的，它会尽可能多的匹配。你能给我 6 个，我就要 5 个。你能给我 3 个，我就要 3 个。
// 反正只要在能力范围内，越多越好
遅延マッチング
let regex = /\d{2,5}?/g;
let string = "123 1234 12345 123456";
console.log( string.match(regex) );
// => ["12", "12", "34", "12", "34", "12", "34", "56"]
// 其中 /\d{2,5}?/ 表示，虽然 2 到 5 次都行，当 2 个就够的时候，就不再往下尝试了
遅延マッチングは、量指定子の後に疑問符を追加することで実現できます。遅延マッチングの記憶方法は次のとおりです。量指定子の後に疑問符を追加し、満足しているか、貪欲ですか? と尋ねます。
惰性量词: 贪婪量词:
{m,n}? {m,n}
{m,}? {m,}
?? ?
+? +
*? *
3.支店
パターンは水平および垂直のあいまいマッチングを実現できます。複数選択ブランチは、複数のサブモードの 1 つを選択することをサポートできます。
具体的な形式は次のとおりです: (p1|p2|p3)。ここで、p1、p2、および p3 はサブパターンであり、それらのいずれかを意味する | (パイプ記号) で区切られています。
// 例如要匹配字符串"vue"和"react" 可以使用 /vue|react/
let R = /vue|react/g
let str = "vue and react"
console.log(str.match(R))
// ['vue', 'react']
分岐構造も遅延一致で、前が一致すると、後は一致しなくなります。次のように
// 上面的例子改为去匹配"vue and vuex"
let R1 = /vue|vuex/g
let str1 = "vuex"
console.log(str1.match(R1))
// ['vue']
let R2 = /vuex|vue/g
let str2 = "vuex"
console.log(str2.match(R2))
// ['vuex']
4. 事例分析
例 1. 16 進数のカラー値の一致
一致する必要があります:
#ffbbad
#Fc01DF
#FFF
#ffE
分析:
16 進文字を表すには、文字グループ [0-9a-fA-F] を使用できます。この場合、文字は 3 回または 6 回出現する可能性があり、量指定子と分岐構造を使用する必要があります。
分岐構造を使用する場合は順序に注意する必要があります (遅延)
正規表現:
var regex = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g;
var string = "#ffbbad #Fc01DF #FFF #ffE";
console.log( string.match(regex) );
// => ["#ffbbad", "#Fc01DF", "#FFF", "#ffE"]
例 2. マッチング時間
24 時間時計を例に挙げると、以下と一致する必要があります。
23:59
02:07
分析します:
合計4桁で、1桁目は[0～2]、1桁目が「2」の場合は2桁目は[0～3]、それ以外の場合は2桁目は[0～9]となります。 ] ]
3桁目は[0-5]、4桁目は[0-9]
正規表現:
var regex = /^[01][0-9]|2[0-3]:[0-5][0-9]$/;
console.log( regex.test("23:59") ); // true
console.log( regex.test("02:07") ); // true
^ と $ はそれぞれ文字列の先頭と末尾を示すために通常のパターンで使用され、キャレットは反意語文字グループの反転を示すために文字グループで使用されます。
「7:9」とも一致する必要がある場合、つまり、正時の前の「0」は省略できます。
var regex = /^(0?[0-9]|1[0-9]|[2][0-3]):(0?[0-9]|[1-5][0-9])$/;
console.log( regex.test("23:59") ); // true
console.log( regex.test("02:07") ); // true
console.log( regex.test("7:9") ); // true
例 3. 日付の一致
たとえば、yyyy-mm-dd 形式は次と一致する必要があります。
2017-06-10
分析: 4 桁の年。[0-9]{4} 月として表現できます。
文字グループと量指定子
によって 2 桁、01 02 03 04... 10 11 12 の 2 つのケースに分けられ、さらに 0 を表す分岐が追加されます。 [1- 9]|1[0-2]
日を 2 桁で表し、最大数は 31 で、0[1-9]|[12][0-9]|3[01] と表現できます。
正規表現:
var regex = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;
console.log( regex.test("2017-06-10") ); // true
例 4. ウィンドウ オペレーティング システムのファイル パスは
恥ずかしいです。この質問はわかりにくいので、すべてを直接投稿します...
一致する必要があります。
F:\study\javascript\regex\regular expression.pdf
F:\study\javascript\regex\
F:\study\javascript
F:\
分析:
全体的なパターンは次のとおりです: ドライブ文字:\folder\folder\folder は
「F:」と一致します。[a-zA-Z]:\ を使用する必要があります。ドライブ文字は大文字と小文字が区別されません。 \ 文字を正しく変換する必要があります。
ファイル名またはフォルダ名には特殊文字を含めることはできません。現時点では、有効な文字を表す文字グループ [^\: <>|"?\r\n/] を除外する必要があります。
また、それらの名前は使用できません。空、少なくとも 文字がある、つまり量指定子 + を使用するため、フォルダー \ に一致させるには、[^\: <>|“?\r\n/]+\ を使用できます。
また、フォルダー \ は何度でも出現できます。つまり、 ([^\: <>|"?\r\n/]+\)です。括弧は、その内部規則性が全体であることを示します。詳細については、第 3 章を参照してください。(まだ存在する可能性があります)パスの最後の部分は \ のない
フォルダーである可能性があるため、([^\:*<>|”?\r\n/]+)? を追加する必要があります。
最終的には、より複雑な規則性に結合されます。
var regex = /^[a-zA-Z]:\\([^\\:*<>|"?\r\n/]+\\)*([^\\:*<>|"?\r\n/]+)?$/;
console.log( regex.test("F:\\study\\javascript\\regex\\regular expression.pdf") );
console.log( regex.test("F:\\study\\javascript\\regex\\") );
console.log( regex.test("F:\\study\\javascript") );
console.log( regex.test("F:\\") );
// => true
// => true
// => true
// => true
このうち、JavaScriptで文字列が\という文字を表現する場合もエスケープする必要があります。
例 5. ID の一致
からのリクエスト
id="コンテナ"を抽出します。分析:
"id=xxx" の形式に従って正規表現を記述することは簡単に考えられます (例: /id=".*"/)。しかし、正規表現の貪欲一致と遅延一致により、* は貪欲一致です。コンテナの後ろに二重引用符がある場合
、数量子は停止せず、最後の二重引用符が見つかるまで一致し続けます。
let regex = /id=".*"/
let string = '<div id="container" class="main"></div>';
console.log(string.match(regex)[0]);
// => id="container" class="main"
貪欲な量指定子にプラス ? 問題を解決するには遅延量指定子に変更します
let regex = /id=".*?"/
let string = '<div id="container" class="main"></div>';
console.log(string.match(regex)[0]);
// => id="container"
V. まとめ
通常の文字列マッチングに関しては、主に文字グループ、量指定子、分岐構造を習得し、次に遅延マッチングと貪欲マッチングを理解する必要があります。基本的に、ほとんどの文字マッチングが可能です
。今後、正規表現に関する知識をさらに更新していきます。気に入ったら、それに注目するか、直接 Yao丨Insight プロデューサーの「JavaScript 正規表現ミニブック」
を参照してください。他の通常の教材を学習する前に、ミニブックと比較してシンプルで理解しやすく、他の教材とは異なり、段落を読んだ後は学習する意欲がありません