🤎
【JavaScript】正規表現と活用メソッド
こんにちは。
実務でscriptタグ内に正規表現を用いた記述があり、普段使用する機会がなかったため、今回こちらの記事でまとめてみました。
手軽に索引できるよう、簡略にまとめているので説明不足箇所が多いかと思いますがご了承ください。
正規表現とは
正規表現とは、特殊な文字列を組み合わせてパターンを作成することで、そのパターンに合う特定の文字を見つけ出すことができる。
const postcode = '111-1111';
const result = postcode.match(/^\d{3}-?\d{4}$/);
//パターンに適合しなければreusltはnullになる。
正規表現の作成方法
正規表現は２つの手法で作成できる。
- 「リテラル」を用いた方法
"/"で囲むことで、直接的に正規表現を指定することができる。[1]
var str = /正規表現/オプション;
- 「RegExp」コンストラクタを用いた方法
RegExp()の引数へ文字列の正規表現パターンを指定すれば認識される。[2]
var str = new RegExp('正規表現','オプション');
オプション
| オプション名 | 説明 |
|---|---|
| g | グローバルサーチ。文字列全体で見つかった全てのパターンにマッチさせる。あるパターンを繰り返し置換したり検索したい場合は必須のオプション。 |
| i | 大文字と小文字を区別しない。無指定の場合は区別。 |
| m | 対象のテキストを複数行として認識させます。無指定の場合は、どんなテキストも1行として扱われる。 |
| u | 正規表現内でユニコード値を表したい場合に必要なオプション。[3] |
主な正規表現パターン
基本形
| オプション名 | 説明 | 備考 |
|---|---|---|
| ABC | ABCの文字列に合致 | |
| [ABC] | A,B,Cのいずれか1文字と合致 | |
| [ABC] | A,B,C以外のいずれか1文字と合致 | |
| [A-Z] | AからZまでのいずれか1文字に合致 | |
| \ | 次の文字をエスケープ | |
| ^ | 行の先頭に合致 | /^A/ ： "BBA"の'A'には合致しないが、"ABB"の'A'には合致する。 |
| $ | 行の末尾に合致 | /A＄/ ： "BBA"の'A'には合致するが、"ABB"の'A'には合致しない。 |
文字・数字・改行など
| オプション名 | 説明 | 備考 |
|---|---|---|
| . | なんらかの1文字 | |
| \w | 大文字/小文字の英字、数字、アンダースコアに一致 | \W:文字以外に一致 |
| \d | 0〜9の数字に一致 | \D:数字以外に一致 |
| \s | 空白などのタブ・改行・スペースに一致 | \S:空白以外に一致 |
| \n | 改行に一致 | |
| \r | 復帰に一致 | |
| \t | タブに一致 | |
| ~ | 「~」で表される文字 |
繰り返し
| オプション名 | 説明 | 備考 |
|---|---|---|
| * | 直前の文字の０回以上の繰り返しに合致する。 | /\d*/とするとどんな桁数の数字にもマッチする。未入力の場合、空文字''を返す。 |
| + | 直前の文字の１文字以上の繰り返しにマッチする。 | /\d+/とするとどんな桁数の数字にもマッチする。未入力の場合、nullを返す。 |
| {n} | 直前の文字をn回一致 | "[0-9]{3}"は3桁の数字 |
| {n,} | 直前の文字をn回以上一致 | "[0-9]{3,}"は3桁以上の数字 |
| {n,m} | 直前の文字をn~m回一致 | "[0-9]{3, 5}"は3~5桁の数字 |
| ? | 直前の文字０回か１回の出現に一致。 | /\d\stimes?/で1times~9timesといった表現が可能になる。 |
正規表現のメソッド
match
str.match(pattern) //str:検索対象文字列 pattern:正規表現
//例
var str = "abcdef"
//a~cのいずれかにマッチ、グローバルサーチ(全てのパターンにマッチ)、大文字小文字の区別なし
var result = str.match(/[a-c]/gi);
undefined
console.log(result);
(3) ["a", "b", "c"]
matchメソッドは正規パターンで文字列を検索し、合致した文字列を配列で返す。
マッチしない場合はnullを返す。
search
const str = 'abcdef';
const result = str.search(/def/);
console.log(result);
3
searchメソッドは、対象文字列の中に目的のキーワードが存在した場合、最初にマッチした文字が何文字目にあたるかを返す。
マッチしなかった場合は-1を返す。
replace
const tel_data = "090-1111-2222";
//(最初3文字の数)-(4文字の数)-(最後4文字の数)
const result = tel_data.replace(/^\d{3}-\d{4}-\d{4}$/, '***-****-****');
console.log(result);
****-****-****
replaceメソッドはreplace(/変更したい文字列/, 変更後に表示させたい文字列)を入れ込むことで、マッチした文字列を別の文字列に置換することができる。
test
const regexp = new RegExp(/^\d{2}$/);
const result1 = regexp.test(6);
const result2 = regexp.test(27);
const result3 = regexp.test(122);
console.log(result1);
console.log(result2);
console.log(result3);
false
true
false
testメソッドは、test(/条件/)と文字列を検索し、true/falseで返す。
split
const str = 'A,B C';
//",","空白"を区切りとして使う
const result = str.split(/,|\s/);
console.log(result);
["A", "B", "C"]
splitメソッドはsplit(/区切りとして認識したい文字/)を入れることで、その文字を基準に文字列を分割することができる。
上の例のように","や"空白"など別々の区切りで並んでいる文字列内の文字を整地したり、"2022-02-03"などの日付を年月日ごとに配列として取り出すこともできる。
参考文献
Discussion