$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JSにおける正規表現
Search
ls_pr
March 11, 2021
0
140
JSにおける正規表現
ls_pr
March 11, 2021
Tweet
Share
More Decks by ls_pr
See All by ls_pr
戦場で生き抜く 炎上案件の耐え方
ls_pr
0
210
自作PCのすすめ
ls_pr
0
140
ツボを押さえたWFの作り方
ls_pr
0
130
Linuxのちょこっと調べ
ls_pr
0
130
色々な色の話~今日から使える簡単配色テクニック3つ~
ls_pr
0
250
ゼロから始めるフロントエンドモジュール開発についてあれこれ
ls_pr
0
130
ejsのすすめ
ls_pr
0
170
Vue.jsの機能を使って色々作ってみた
ls_pr
0
440
NuxtではじめるVue.js
ls_pr
0
290
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Git: the NoSQL Database
bkeepers
PRO
432
66k
Side Projects
sachag
455
43k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
11
960
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Documentation Writing (for coders)
carmenintech
76
5.2k
It's Worth the Effort
3n
187
29k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
51k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
The Language of Interfaces
destraynor
162
25k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
1
70
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Transcript
JSにおける正規表現 中村 祐太
目次/概要 1. 正規表現とは 2. JSの主な正規表現パターン 3. 正規表現オブジェクトの生成 4. 動作オプションの設定 個人的に疑問の多かった正規表現を、ざっくりと勉強した結果の発表。
正規表現の基礎の基礎を説明。 具体的な応用・活用等には踏み込まない。
1. 正規表現(Regular Expression)とは • 文字列をパターン化して表現する仕組み • 条件に合う文字列を検索し、処理を行える ・文字列が条件と適合するか「テスト」する ・条件に合う文字列を「取得」する ・〃指定した区切り文字で「分割」する
・〃新しい文字列に「置換」する → test() → match(),exec() → split() → replace() 目的の処理 併用するメソッド
1. 正規表現(Regular Expression)とは 「文字列をパターン化」? 郵便番号 0~9の数字3桁 + “-” + 0~9の数字4桁
携帯電話番号 0 + 7~9のどれか1つ + 0 + “-” + 0~9の数字4桁 + “-” + 0~9の数字4桁 000-0000 080-1234-5678
2. JSの主な正規表現パターン 基本形 量指定 位置指定 文字セット ABC [ABC] [^ABC] [A-Z]
A|B|C X* X? X+ X{n} X{n,} X{m, n} ^ $ . \w \W \d \D \n \r \t \s \S \~
2. JSの主な正規表現パターン 郵便番号 携帯電話番号 0~9の数字3桁 + “-” + 0~9の数字4桁 0
+ 7~9のどれか1つ + 0 + “-” + 0~9の数字4桁 + “-” + 0~9の数字4桁 ^[0-9]{3}-[0-9]{4}$ または ^\d{3}-\d{4}$ ^0[789]0-[0-9]{4}-[0-9]{4}$ または ^0[789]0-\d{4}-\d{4}$ ^ :文字列の先頭を指定 $ :文字列の末尾を指定 [0-9] :0~9の数字 {n} :直前に指定した文字とn回一致 \d :数字を示す([0-9と同意])
3. 正規表現オブジェクトの生成 方法① コンストラクターを使用 方法② 正規表現リテラルを使用 正規表現は文字列として指定するため、バックスラッシュ(\)の挙動に注意 (※JSの文字列において、 “\”は意味を持った予約文字) 正規表現パターンそのものにスラッシュ(/)を使用する場合は、エスケープ処理を行う
(※正規表現において、 “/”は意味を持った予約文字)
3. 正規表現オブジェクトの生成 余談 「RegExpオブジェクト」と簡単に書きましたが、 肝心の”RegExp”の読み方はハッキリしていません。 最後の”p”の発音が特に困るようで、 最早”p”は無視して「れげっくす」「れじぇっくす」と読んだり、 割り切ってフルネームで「レギュラーエクスプレッション」と読んだり、 全てを諦めて「正規表現」と読んでしまう事もあるようです。 今回の件に限らず、読み方が今一つハッキリしないプログラミング用語を、
他の方はどう読んでいるのか気になったりもします。
4. オプション(フラグ)の設定 「g」「i」「m」「u」等のオプションを付け加えることで、 パターンに応じた検索の挙動を制御出来る。 フラグ フラグ名 効果 g Global 初めの1件のみでなく、文字列全体を検索対象にする
i Ignorecase 大文字/小文字の違いを無視する m Multiline 「^」「$」が「行頭」「行末」を示すようになる u Unicode サロゲートペア文字(※)が認識可能になる ※サロゲートペア文字: 本来は1文字を2バイトで表現するUTF-8が、扱える文字数の拡張のため4バイトで表現している文字。 主要なオプションは以下↓