こんにちは

正規表現、メールアドレスやURLのvalidateなどではインターネット上に落ちているものをそのまま使ってしまったり、なかなかしっかりと理解して使えている人は意外と少ないのではないでしょうか

今回は正規表現を用いて、CSSのtransformから特定のプロパティのみ取り出すソースコードを紹介します。

CSSのtransformでは要素の移動、変形を指定することができます。

transformで指定することができるプロパティはtranslate(移動)、rotate(回転)、scale(拡大・縮小)、skew（歪み）の４つが用意されており、実際には、

transform: translate(10px,10px) rotate(10deg);

のように、transform内に複数のプロパティを同時に指定する書き方になります。

この際に、translateプロパティのみ取得する関数が以下になります。

export const getTranslate = (transform: string) => {
  const translate = transform.match(/translate\(.+?\)/);
  return translate ? String(translate[0]).match(/-?\d+(\.\d+)?/g) : [0, 0];
};

まず、

 const translate = transform.match(/translate\(.+?\)/);

で、transofrmからtranslateのみ取り出します。

「()」は正規表現では予約語になるので、バックスラッシュを用いてエスケープします。

「.」は任意の文字、「+」は1文字以上の繰り返しを表し、「?」を末尾につけることで最短マッチになります。

最短マッチを用いない場合、最後方の「）」とマッチしてしまうため、translateのみでなく、他のプロパティまで取得してしまうことになります。

この結果、以下が取得できます。

translate(10px,10px)

さらにここから数値のみ取り出すため、

String(translate[0]).match(/-?(\d)+(\.\d+)?/g)

とします。

translateにはマイナスの値も含まれる場合があるため、「-?」と指定します。「?」は0文字以上の繰り返しの指定となるため、マイナスの指定がある場合もない場合も取得可能になりました。

「\d」は数字を表すメタ文字となり、「+」をつけることで任意の桁数の取得、さらに小数点の場合も考慮し、「(\\.\d+)?」と指定しています。

また、末尾の「g」は正規表現のオプションで、パターンにマッチした全てを取得します。

この結果、以下が取得できました。

[10,10]

これでtransformからtranslateの値のみ取得することができましたね。

今回の正規表現で用いた「translate」をrotateなどに書き換えることで、他のプロパティ値も取得可能になりますね。

一見難しそうに見える正規表現も、あらためて勉強し直すことで苦手意識がかなり薄まりました。

今後も活用していければと思います。