0
0

JavaScriptの正規表現と実例

Last updated at Posted at 2024-02-21

はじめに

初めてQiitaで記事を書くので、内容が分かりにくい・読みづらい等々あると思いますが、ご容赦ください。

今回の内容は正規表現です。最近使ったので、軽くまとめてみました。

身近な正規表現

今まで使ったことがなかったのですが、Visual Studio Code(VS Code)での検索機能(Ctrl + F)のところに、Aaabの右横に.*と表示されています。あのボタンを押すと、正規表現で検索ができるみたいですね。

サンプルのソースコードで検索してみる

試しに、下記のようなコードがあったとします。

let変数名 = 1;

letと変数名の間に半角の空白がないことを正規表現で見つけたいと思います。

sample.js

let a = 1;
letb = 2; //間違っている
let c = 3;
letd = 4; //間違っている

では、letの後に半角の空白がないものを正規表現で探してみましょう。

  • letbletdが該当します

探す方法

  • letという文字の後に何らかのアルファベットがある

実際の正規表現

正規表現
let\w+ //ただし、LetやlEtとかにも反応します

では、\w+は何を意味するのでしょうか?

記号 意味 備考
\w アルファベット(大・小文字)
・数字・_(アンダースコア)
\とwの間には空白はない
+ 「+」より直前に書いた文字・記号が1つ以上ある ここでは\w
つまり、アルファベットや数字、_が1個以上続く


ざっくりとまとめると表のような感じでしょうか。

もう一度、正規表現に戻ると、

let\w+

つまり、letの後に文字が続いているもの(1文字以上)を探せという意味になります。

因みに、+を外すと、
letbbなどletの後に2回以上続くものにはlet直後のbまでしか反応しません。

正規表現を使って文字を探すプログラム

では、次の文章があったとします。

文章
三角形の面積 = 底辺 × 高さ ÷ 2
長方形の面積=  × 
台形の面積 = (上底+下底) × 高さ ÷ 
円の面積= 半径 × 半径 × π

面積 =:積と=の間に半角の空白がある文章を探すプログラムを書いてみます。

  • 三角形の面積 = 底辺 × 高さ ÷ 2
  • 台形の面積 = (上底+下底) × 高さ ÷ 2

この2つですね。


今回は、

  • 改行で文章を区切る
  • それぞれに対して、正規表現がマッチするかどうかを判定する
  • 該当する文章を出力する

ということをしてみます。


search.js
// 探したい文字列を/で囲みます
const regex =  /面積\s=/;  //regexは正規表現を意味するみたいです

// 入力テキスト
const text = `三角形の面積 = 底辺 × 高さ ÷ 2
長方形の面積= 縦 × 横
台形の面積 = (上底+下底) × 高さ ÷ 2
円の面積= 半径 × 半径 × π`;


// 改行で入力テキストを分割しました
const splitText = text.split("\n");

//splitは配列になっているので、今回はfor文で1つ1つ確認します
for(let i of splitText){

    //それぞれの文章が正規表現で指定した文字列と一致するか?    
    if(i.match(regex)){
        console.log(i);
    }
    
}

ご指摘いただいましたが、
単に一致だけを調べる場合、testを使います。
(一致したらtrueを返してくれます)

if(regex.test(i)){
  console.log(i);
}

出力
三角形の面積 = 底辺 × 高さ ÷ 2
台形の面積 = (上底+下底) × 高さ ÷ 2

期待どおりの結果でした。

余談とおわりに

今回はシンプルな文章でご紹介しました。

例えば、{(2024/12/31)}を正規表現で、となると

日付
\{(\d{4}\/\d{2}\/\d{2})\}
  • \dが数字
  • {4}数字が4つ続く、{2}数字が2つ続く

正規表現の中に、{とかとか/とか入れて探したい!となると、混乱しますね:sweat_smile:



今回は以上です。

最後までお読みいただき、ありがとうございました!

0
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0