JavaScriptの正規表現で画像のファイル名を変更する
published:
2018.07.30 /
modified:
例えばロールオーバーなど、JavaScriptで画像を変更したい場合に、正規表現が便利だ。
正規表現で画像を変更するサンプル
文字列の置換は replace メソッドを使う。
以下の例では、画像ファイルの拡張子がgif、jpg、jpeg、png のいずれかであり、なおかつ、拡張子の前に、_off が付く場合に、正規表現を利用して、その _off を _on に置き換えている。
img 要素の src 属性の値の取得は getAttribute メソッド、設定は setAttribute メソッドを利用している。
<img id="myimage" src="image_off.jpg" alt="">var img = document.getElementById('myimage');
var src = img.getAttribute('src');
console.log(src); // image_off.jpg
img.setAttribute('src', src.replace(/_off\.(gif|jpg|jpeg|png)/, '_on.$1'));
src = img.getAttribute('src');
console.log(src); // image_on.jpg