jQuery:replaceメソッドと正規表現で画像の切り替え！

今回は、replaceメソッドと正規表現で画像の切り替え！について、実際にサンプルコードを用いて、詳しく記載していこうと思います。

前回記載しました、画像の切り替え：ロールオーバーの設定では、あまりに汎用性がないためJavaScriptのreplace()メソッドと正規表現を用いて、前回と同じような画像の切り替え方法を詳しく記載してみようと思います。

という事で、それでは今回はッ、

・replace()メソッドを使って文字列を置き換える
・正規表現とは？
・プリロード機能を付ける

上記について記載していこうと思います…。

replace()メソッドを使って文字列を置き換える

JavaScriptのメソッド、replace()は、文字列を置き換えることができるメソッドです。下記のサンプルは、「テスト」という文字列を「test」に置き換えています。

サンプルHTML<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
var newText = $(“#point”).text().replace(“テスト”,”test”);
$(“#point”).text(newText);
});
</script>
</head>
<body>
・・省略・・
<p id=”point”>テスト：replace()メソッドを使えば、文字列を置き換えることができます。</p>
・・省略・・
</body>
</html>

表示結果

テスト：replace()メソッドを使えば、文字列を置き換えることができます。

HTMLソースでは「テスト」とマークアップされていますが、replace()メソッドによって「test」に置き換えられています。

replace(置き換えたい文字列,置き換え後の文字列）

このreplace()メソッドを利用すれば、前回使用したサンプルソースを下記のようにファイル名の部分だけ置き換えることができます。

replace(“button”,”button_hover”)

文字列を置き換えるreplaceを記載しましたが、これが前回のロールオーバーのコードと深く関係します。上記のように、ただ文字列を置き換えるだけでは、前回同様、色々なファイル名に対応できるわけではありません。そこで正規表現というものを利用して、文字列を置き換える仕組みを記載してみます。

正規表現とは？

正規表現とは、文字列の文字の並び方（パターン）を表現するもの。例えばある文字列が「小文字の半角英数のみ」で記述されていた場合、これをプログラムの中で表現するために、以下のように記号を使って表現します。

/^[a-z]+$/

沢山の記号やアルファベットが並んでいて、意味不明な記述にも見えますが、この記号1つひとつには意味があり、/^[a-z]+$/は「小文字の半角英数のみ」という文字列の並びを表しています。そしてこのように記号を使って文字列のパターンを表現することを正規表現といいます。

それでは少し詳しく記載します。まず大前提として、正規表現は「/」の間に記述します。

/ ここに記述 /

記号の意味を少しだけですが一覧で記載してみます。

^	行頭を表します。
[a-z]	a～zまで（小文字のアルファベット）を表します。
+	直前の1文字の1回以上の繰り返し。
$	行の末尾を表します。

/^[a-z]+$/ を言葉で表現してみると、
行頭（^)が小文字のアルファベット（[a-z]）で、それを1回以上、行の終わり（$）まで繰り返す（+）。

そして正規表現で利用できる記号は、まだまだたくさんありますが、今回は割愛して、コードの中で使用する記号のみ記載していきます。

正規表現を文字列置き換えに適用する

それでは、ロールオーバーのコードを正規表現を利用して作成してみます。ロールオーバーで使うファイル名が違ってもコードが適用されているのが分かるように、HTMLに3つの画像を用意してみました。

サンプルHTML2<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“.rollover”).each(function(){
var defaultSrc = $(this).attr(“src”);———-①
$(this).hover(function(){
$(this).attr(“src”, defaultSrc.replace(/^(.+)———-②
(\.[a-zA-Z]+)$/, “$1_hover$2”));———-②
},
function(){
$(this).attr(“src”,defaultSrc);
});
});
});
</script>
</head>
<body>
・・省略・・
<ul>
<li><a href=”#”><img class=”rollover” src=”images/button.jpg” alt=”お問い合わせ” width=”220″ height=”65″></a></li>
<li><a href=”#”><img class=”rollover” src=”images/button2.jpg” alt=”ダウンロード” width=”220″ height=”65″></a></li>
<li><a href=”#”><img class=”rollover” src=”images/button3.jpg” alt=”follow me” width=”220″ height=”65″></a></li>
</ul>
・・省略・・
</body>
</html>

まずはそれぞれの画像に対応させるため、全体をeach()メソッドで囲みます。続いて①の部分では、デフォルトのsrc属性の値を、変数defaultSrcに代入しておきます。
正規表現を利用した文字列置き換えの部分が②です。

defaultSrc.replace(/^(.+)(\.[a-zA-Z]+)$/, “$1_hover$2”))

デフォルトのsrc属性の値（変数defaultSrc)を、replace()メソッドで文字列置き換えをおこなっています。置き換えたい文字列の正規表現から細かく記載してみます。

images/button.jpg

緑色の部分が、グループ1：青色の部分がグループ2になります。

次に後半部分の置き換えたい文字列のほうの正規表現、$1_hover$2を記載してみます。まず、$1、$2の部分ですが、これは行の終わりを表す$マークではなく、()でグループ化した部分の内容になります。つまり$1はグループ1、$2はグループ2の内容になります。それぞれグループの内容をあてはめてみると、下記のような内容が完成します。

replace(“images/button.jpg”, “images/button_hover.jpg”)

これが正規表現を使った文字列置き換えになります。入れ替える画像ファイル名は、〇〇_hover.jpgや〇〇_hover.pngのように、_hoverを末尾に付けるようにすることをオススメします。

プリロード機能を付ける

上記、サンプルHTML2のコードで、ロールオーバーの機能としては問題なく動作するものができました。しかし少し問題がないわけではありません。コードを良く見ると、マウスがのったとき（hover時）に初めて画像のsrc属性を変更しています。つまりマウスがのったときに、画像を新たに読み込むわけになります。その結果、環境によってはマウスをのせてもすぐに画像が表示されずに、タイムラグが発生してしまう場合があります。

それを防止するために、ページが読み込まれた時点（マウスがのる前）で画像を読み込んでおく、プリロード機能を付けておく必要があります。

実際にどのように記述するか記載してみます。$(“<img >”)とすれば、img要素を作成することができます。そしてこの作成した画像のsrc属性に、_hover画像のパスを記載しておけばOKになります。
では、分かりやすいようにサンプルを記載してみます。

サンプルHTML3<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“.rollover”).each(function(){
var defaultSrc = $(this).attr(“src”);———-①
var hoverSrc = defaultSrc.replace(/^(.+)(\.[a-zA-Z]+)$/, “$1_hover$2”)———-②
$(“<img >”).attr(“src”,hoverSrc);———-③
$(this).hover(function(){
$(this).attr(“src”, hoverSrc);
},
function(){
$(this).attr(“src”,defaultSrc);
});
});
});
</script>
</head>
<body>
・・省略・・
<ul>
<li><a href=”#”><img class=”rollover” src=”images/button.jpg” alt=”お問い合わせ” width=”220″ height=”65″></a></li>
<li><a href=”#”><img class=”rollover” src=”images/button2.jpg” alt=”ダウンロード” width=”220″ height=”65″></a></li>
<li><a href=”#”><img class=”rollover” src=”images/button3.jpg” alt=”follow me” width=”220″ height=”65″></a></li>
</ul>
・・省略・・
</body>
</html>

上記では①と②で、画像のパスを事前に変数にしてあります。そして③ではimg要素を作成しておきます。append()メソッドなどでHTMLに挿入していないため、HTML上には存在しないimg要素となりますが、要素としては読み込まれ作成されるので実質プリロード機能となります。

ということで今回は、replaceメソッドと正規表現で画像の切り替えについて、サンプルコードを交え記載いたしました。

正規表現、初心者の方には少し難しいことと思います。しかしながらプログラミングを行ううえで、複雑になればなるほどプログラムに必要になってくる正規表現、文字列の表現方法を覚える必要はなく、その都度、調べれば済む事ですが、プログラムにおける記載方法の考え方を、今回のサンプルコードなどを参考にして頂ければ、幸かと思います。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。