はじめての javascript・jQuery - ロールオーバー画像切替え

javascript といえば MM_swapImage()（と MM_preload()）な世代のワタクシですから。（ほとんど利用したことないけど）丁度仕事で必要にもなったので。
紆余曲折を経て以下の形に。

$(document).ready(function(){
    function rollover_img(selector, suffix){
        $(selector).each(function(i){
            var img_src = $(this).attr("src");  //画像要素の初期src属性値
            if (!img_src.match((suffix))) {  //接尾語（suffix）がない場合
                if (img_src.match("(\.(png|jpg|gif))")){  //拡張子が png|jpg|gif の場合
                    var img_src_part = RegExp.leftContext;  //拡張子以外を抽出
                    var on_img_src = img_src_part + suffix + RegExp.lastMatch;  //接尾語を付与したsrc属性値を作成
                    var preload_img = new Image();
                    preload_img.src = on_img_src;
                    $(this).hover(
                        function(){
                            $(this).attr("src", on_img_src);
                        },
                        function(){
                            $(this).attr("src", img_src);
                        }
                    )
                }
            }
        })
    }

    rollover_img("#ID img", "_on");  //画像切替えを行う要素のセレクタと、画像ファイルに付く接尾語を引数に関数を呼び出す
});

ところが、oepra が lastMatch 他、RegExpメソッドに未対応とのこと。Opera 9 の ECMAScript サポート
別の方法を考える。

$(document).ready(function(){
    function rollover_img(selector, suffix){
        $(selector).each(function(i){
            var img_src = $(this).attr("src"); //画像要素のsrc属性初期値
            if (!img_src.match((suffix))) { //接尾語（suffix）がない場合
                /* */
                var on_img_src = "";
                var img_src_part = "";
                if (img_src.match("(\.png)")){
                    img_src_part = RegExp.leftContext; //拡張子以外を抽出
                    on_img_src = img_src_part + suffix + ".png"; //接尾語を付与したsrc属性値を作成
                } else if (img_src.match("(\.jpg)")){
                    img_src_part = RegExp.leftContext; //拡張子以外を抽出
                    on_img_src = img_src_part + suffix + ".jpg"; //接尾語を付与したsrc属性値を作成
                } else if (img_src.match("(\.gif)")){
                    img_src_part = RegExp.leftContext; //拡張子以外を抽出
                    on_img_src = img_src_part + suffix + ".gif"; //接尾語を付与したsrc属性値を作成
                }
                /* */
                var preload_img = new Image();
                preload_img.src = on_img_src;
                $(this).hover(
                    function(){
                        $(this).attr("src", on_img_src);
                    },
                    function(){
                        $(this).attr("src", img_src);
                    }
                )
            }
        })
    }

    rollover_img("#ID img", "_on");  //画像切替えを行う要素のセレクタと、画像ファイルに付く接尾語を引数に関数を呼び出す
});

とりあえず動いた。
が、そもそも拡張子を決め打ちにしない形で出来るんじゃないかと思うがどうだろう。もっと簡単に文字列の分割、連結が出来ないものでしょうか。
また、他にも不細工な箇所が点在する気がしてなりません。
JS 自体をもっともっと学習する必要性をひしひしと感じまうす。