とあるシステムを作っている時に、Javascriptの正規表現に悩まされたので、備忘録&情報伝達として、ブログに書き残しておきます。
同じく苦しんでいる人の参考になれば幸いです。
cssファイルをテキストで分解する正規表現
セレクター + スタイルシートを取得
const reg = /(.+?)\{(.+?)\}{1,2}/ig
const string = "cssのテキストデータをセット";
const arr = []
let res
while ((res = reg.exec(string)) !== null){
arr.push({
selector : res[1],
css : res[2],
})
}
console.log(arr
string変数に、cssファイルを読み込んでその文字列を挿入すると、普通に書かれているcssのセレクタとスタイルシート記述が分解して取得できます。
試しに次のcssを読み込むと・・・
div.test {
display:block;
background-color:red;
}
{
selector : "div.test "
css : "display:block; background-color:red;"
}
このように値を取得できました。
@media（メディアクエリ）の情報を取得
const string = "@mediaの入ったcssテキストを挿入";
const reg = RegExp("@media\\s+?(.+?)\{(.*?\})\}","ig")
const arr = []
let res
let num = 0
while ((res = reg.exec(string)) !== null){
arr.push({
condition : res[1],
stylesheet : res[2],
})
}
console.log(arr)
次のサンプルcssを使って、上記のスニペットを実行すると、
@media (max-width:500px){
div.test {
display:block;
background-color:blue;
}
}
@media (min-width:500px){
div.test {
display:block;
background-color:orange;
}
}
上記をテキスト値として、実行すると、次のように値が取得できます。
[
{
condition : "(max-width:500px)",
stylesheet : "div.test { display:block; background-color:blue;}"
},
{
condition : "(min-width:500px)",
stylesheet : "div.test { display:block; background-color:orange;}"
}
]
注意点
上記のサンプルプログラムは、関数の形にしていないので、お好きな形で、function記述してお使いください。
cssは、ajaxなどと組み合わせてcssファイルを読み込んでその値を関数に流し込む形にするのが望ましいです。
あとがき
@mediaの記述をするパターンが多かったので、今回はスタンダードcssと@mediaパターンを記述しておきました。
@mediaで取得したstylesheetは、そのままスタンダードパターンに流し込むと、selector + cssに分解してくれるので、再現性バッチリのはずです。
こんなシステム何に使うのかって？
ベタに色々なパターンでユースケースがあるんですよ。
今作っているシステムが近日中に出来上がると思うので、そしたらブログに公開しますね。
