【JavaScript】 cssプロパティ名をキャメルケースに変換する正規表現

CSSのプロパティ名をJavaScriptで使用する場合、キャメルケースという表記方法を用いることがあります。

そこで、正規表現を使用してプロパティ名とキャメルケースの相互変換をしてみます。

cssプロパティ名をキャメルケースに変換するには、正規表現で "-" の後に小文字のアルファベットが続くか所を検索します。
次に、アルファベット部分を大文字に変換し、正規表現で検索された文字列と置き換えます。

文字列の置き換えは、replaceメソッドを使用します。

const camelCase = text => text.replace( /-([a-z])/g , e => e[1].toUpperCase() );

上手く変換できるか、確認してみます。

const cssProp = [ "border" , "border-top" , "border-top-color"  ];

cssProp.forEach( text => console.log( `${text} → ${camelCase(text)}` ) );

実行すると、次のような文字が出力されます。

想定通りの結果になりました。

前項で変換したキャメルケースのプロパティ名を、元のCSSでのプロパティ名へ戻してみます。

こちらは単純にアルファベットの大文字を正規表現で検索して小文字に変換し、"-"と変換後の文字で置き換えます。

const cssCase = text => text.replace( /([A-Z])/g , e => "-" + e[0].toLowerCase() );

上手く変換できるか、確認してみます。

const cssProp = [ "border" , "border-top" , "border-top-color"  ];

cssProp.forEach( text => console.log( `${text} → ${camelCase(text)}  → ${cssCase(camelCase(text))}` ) );

実行すると、次のような文字が出力されます。

こちらも想定通りとなりました。

今回紹介した関数を利用してスタイル属性を変更する場合、配列形式でアクセスする必要があります。

div.style[camelCase("border-color")] = "red";

実はDOM要素のスタイル属性は、次のように配列形式でアクセスすることで、キャメルケースを使用しなくても変更できます。

div.style["border-color"] = "red";

スタイル属性変更のためにキャメルケースに変換するのは、あまり意味のない行為ですね。

ただしanimateメソッドなどのように、プロパティをキーとしたオブジェクトを引数として受け付けるメソッドでは、キャメルケースを使用する必要があります。

div.animate( {
        backgroundColor : ["#fff","#000","#f00"],
        "border-radius" : [ "0" , "50px" , "0" ], // ← 動作しない
        marginLeft : [ "0" , "300px" , "0" ]
} , 2000 );

今後の改版で使用できる可能性がありますが、しばらくはキャメルケースを使用することになりそうです。