JavaScript正規表現でimg要素のsrc属性を変更する方法

2023/10/27 02:38

このQ&Aのポイント

JavaScriptでimg要素のsrc属性を汎用的に変更する方法を調べています。
正規表現を使って、imgのsrc属性を変更する方法を試しています。
他のブラウザでは問題ないのですが、IE8で正規表現がうまく動作しない問題が発生しています。正しい正規表現の書き方やIE8での対応方法について教えていただきたいです。

ベストアンサー

javascript正規表現がieでうまく動かない

2013/02/11 22:28

imgのsrc属性を汎用的に変更したいので正規表現を使って変更したいと思っています。現在のimg要素をを取得して(下記、変数名currentImg)、 imgのsrc属性を以下のように末尾に_newがついたものに変更したいと考えています。 var newImg = currentImg.src.replace(/^(.+)(\.[a-z]+)$/g,"$1_new$2"); currentImg.src = newImg; 他のブラウザではうまく行くのですが、 ie8でうまく動きません。 ieの正規表現は、何か別の書き方をしないといけないものなのでしょうか？それとも、そもそも書き方が間違っているのでしょうか？詳しい方がいらっしゃいましたらご教授いただけると幸いです。どうぞ宜しくお願いいたします。

mc0816
お礼率94% (69/73)

JavaScript
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

b0a0a
ベストアンサー率49% (156/313)

2013/02/12 02:21 回答No.2

そこには問題ない別の原因エラーの有無やURLの入出力前後の値を確かめるべし

質問者

お礼 2013/02/12 09:38

ありがとうございます。てっきり問題は正規表現の部分だと思っていました。「問題ない」と断言してくださり、確信をもって他にターゲットをしぼって検証ができます。まだ解決はしていないのですが、頑張ってみます。ありがとうございます。

その他の回答 (1)

koun
ベストアンサー率11% (1/9)

2013/02/11 23:42 回答No.1

置換文字列の"$1_new$2"を$1+"_new"+$2としてみたらどうでしょう。以下のサイトによると、ダブルクォーテーション中の変数は変数展開されないそうです。 http://www.site-cooler.com/kwl/jslibrary/2.htm でも、ぼくは初心者ですし、ためしてないので自信は全然ありません。

質問者

お礼 2013/02/12 09:43

ありがとうございます。試してみたのですが、やっぱり出来なかったのです。ですが、別のアドバイスで、「正規表現には問題はない」とのことなので別の観点で検証をしてみます。ありがとうございました。

関連するQ&A

Perlの正規表現
Perlの正規表現 Perlの正規表現で質問です。 MT4.13を使用して携帯用サイトを構築しています。今現在、携帯用記事中の画像を縮小して表示しようと「regex_replace」を使って、記事中のimgタグからsrc部分を抜き出して外部のphpに飛ばしています。 <$MTEntryBody regex_replace="/<img (.*?)src=\"(.*?\.jpg)\"(.*?)>/ig","<img src="phpスクリプト?img=\\2" border="0" />"$> 記事中のjpg(JPG)画像のsrc部分を拾って、phpに渡し、GDで縮小した画像を表示すると言った感じです。しかし、regex_replaceの正規表現部分が上手く機能していないのか、jpg画像の最後の一枚のみ変換されると言った具合です。 JPG画像も含めて、記事中全てのjpg(JPG)画像を縮小して表示したいのですが、正規表現が思い浮かばず質問しました。上記以外にも /<img (.*?)src=\"(.*)?(\.jpg|\.JPG)\"(.*?)>/ig などとしましたが上手くいきませんでした。ちなみに、phpで画像を縮小する部分は問題なく動作しています。以上、宜しくお願い致します。
- 締切済み
- Perl
抽出　正規表現　DOM?
PHPの正規表現で、例えば <img src="画像ファイル名"...> のようにイメージタグのsrc部分の画像ファイル名を抽出させたいのですが、正規表現の記述の仕方がわかりません。このようなイメージタグなのですが、imgがIMGだったり、src=画像ファイル名　のように""がなかったり、 alt, width, height, borderなど属性もありますので、正規表現で純粋に画像ファイル名を抽出するのは難しいと考えますが、ふと思ったのですが、DOM???を使えば簡単にできる？かなと思うだけでこれも実現方法がわかりません。現在、PHP4.3を使っていますが可能でしょうか？
- ベストアンサー
- PHP
JavaScriptでこの正規表現を利用したい
var regUrl = new RegExp("^http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?$"); IEで以上の正規表現の部分で「文字セットの範囲が不正です」のエラーが出るのですが、どこを修正すればよいでしょうか？お願いいたします。
- ベストアンサー
- JavaScript
正規表現について教えてください。
正規表現について教えてください。以下は左に配置したサムネイル（X01s、X01as、X01bs・・・）をクリックすると右にそのサムネイルの拡大画像（X01l、X01al、X01bl・・・）を表示するページです。サムネイルのimgタグを▼以下のようにしたいと考えています。 ※makethumbnail.cgiはサムネイル作成CGI 現在：<img src="X01s.jpg"> 変更後：<img src="/makethumbnail?src=X01s.jpg&w=100&h=&type="> ▼以下はダメでした。正規表現に問題があるのでしょうか。 <img src="/makethumbnail.cgi?src=' + img + 's' + ext + '&w=100&h=&type=" class="thumbnail" onclick="changeImage(this)"> お知恵をお借りできれば幸いです。 <head> <script type="text/javascript"> location.search.match(/^\?img=([^&]+)(\.[^&\.]+)&num=(.+)$/); var img = RegExp.$1; var ext = RegExp.$2; var num = Number(RegExp.$3); function changeImage(img){ var imgsrc = img.src || img; imgsrc.match(/^(.*)s(\.[^\.]+)$/); document.main.src = RegExp.$1 + "l" + RegExp.$2; return false; } document.write = img && ext && num ? document.write : function(){}; </script> </head> <body> <table> <tr> <th> <script type="text/javascript"> /* サムネイル */ document.write('<a href="#"><img src="' + img + 's' + ext + '" class="thumbnail" onclick="changeImage(this)"></a><br /><br />'); for (var i = 1; i < num; i++) { document.write('<a href="#"><img src="' + img + String.fromCharCode(0x60 + i) + 's' + ext + '" class="thumbnail" onclick="changeImage(this)"></a><br><br>'); } </script> </td> <td> <script type="text/javascript"> /* 拡大 */ document.write('<img src="' + img + 'l' + ext + '" name="main" id="main_image" />'); </script> </td> </tr></table>
- 締切済み
- JavaScript
正規表現内に変数を使用する方法
match() や replace() の第1引数に文字列ではなく正規表現を使用できますがこの正規表現内に変数を使用する場合、どうやったらよいのでしょうか。 var str = 'てすと'; alert(str.replace(/str/, 'テスト')); とすることができません。 (Perlではパターン内に変数が使用できるのですがJSでは変数が使用できません) http://ar.aichi-u.ac.jp/blog/js-replace.html に書いてあるように第1引数に文字列を渡すと正規表現ではなくただの文字とのマッチになってしまうようなので(確認済み)使えません。面倒ですがリンク先にあるようにnew RegExpでRegExpオブジェクトを作ってやる方法しかないんでしょうか。
- ベストアンサー
- JavaScript
Javascriptの修正がわかりません
ルート「/」からの設定をkaitoフォルダー「/kaito/」に変更したいのですが、どこを修正すればいいのかわかりません。 $(function () { var url = location.pathname ; var ary = url.split("/"); while ( ary.length >= 3 ) { ary.pop(); } var str = ary.join("/")+"/"; if ( str == "//" ) str = "/"; var target = $("#gnav ul").children("li").children('a[href="'+str+'"]'); if ( target.length <= 0 ) return ; var imgPath = target.children("img").attr("src"); target.children("img").attr("src",imgPath.replace( /_o(\.[a-z]+)$/, "_a"+"$1")); });
- 締切済み
- ネットトラブル
replaceでの正規表現の記載について教えて下さい。
replaceでの正規表現の記載について教えて下さい。 replaceを用いてt2の文字列をclpreの文字を対応するclaftの文字に変更することを考え、下記のようにくんでみましたが、エラーが出てしまい上手く行きません。正しくはどのように記載するのでしょうか？ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー var t2 = "KJANN B　CVA"; clpre = new Array("A" , "B" , " ", "　"); claft = new Array("@" , "*" , "s" , "S"); for (i=0; clpre[i]; i++){ 　t2 = t2.replace(/clpre[i]/g, claft[i]); } ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
- ベストアンサー
- JavaScript
正規表現を使った置換処理。大文字の直前に「_」を入れたい
正規表現を使った置換処理です。大文字の直前に「_」を入れたいと思っています。例：htmlLinkStr → html_Link_Str WSHとして以下のようなコードを1行記述しました。 WScript.Echo("htmlLinkStr".replace(/([A-Z]+)/g, "_" + RegExp.$1)); しかし「html_ink_tr」としょぼい結果しかえられません。「RegExp.$1」の使い方が悪いのかもしれません…。ちなみにVBSでは以下のコードで成功しています。ので大きくはずしてはいないと思うのですが… Set regEx = New RegExp regEx.Pattern = "([A-Z]+)" regEx.Global = True MsgBox regEx.Replace("htmlLinkStr", "_$1") JavaScriptでの正規表現の使い方に詳しい方よろしくお願いします。
- ベストアンサー
- JavaScript
Javascriptでの正規表現（RegExp)
RegExpで「{a|b}」という文字列を「c」に書き換えるための正規表現はどう書けば良いのでしょうか？雰囲気としては "XXXXXXXXX {a|b} YYYYYYYY".replace(new RegExp(正規表現, 'g'), "c"); → "XXXXXXXXX c YYYYYYYY" というのをやりたいです。できれば"{a|b}"の部分は間にスペースやタブが入っても良いようにしたいのですが複雑になるなら"{a|b}"だけでも構いません。よろしくお願いします。
- ベストアンサー
- JavaScript
正規表現（～を含まないものにマッチ）
Perlの正規表現について質問です。画像<img src="http://hogehoge.com/img/gokuu.jpg" border=0><a href="http://hogehoge.com/">hogehoge</a><br> 画像<img src="http://hogehoge.com/img/pikkoro.jpg" border=0><a href="http://hogehoge.com/">hogehoge</a><br> 画像<img src="http://hogehoge.com/img/bejiita.jpg" border=0><a href="http://hogehoge.com/">hogehoge</a><br> 画像<img src="http://hogehoge.com/img/gohan.jpg" border=0><a href="http://hogehoge.com/">hogehoge</a><br> 画像<img src="http://hogehoge.com/img/buruma.jpg" border=0><a href="http://hogehoge.com/">hogehoge</a><br> ↓　処理後　↓ 画像<img src="gazo_new1.jpg" border=0><a href="http://hogehoge.com/">hogehoge</a><br> 画像<img src="gazo_new2.jpg" border=0><a href="http://hogehoge.com/">hogehoge</a><br> 画像<img src="gazo_new3.jpg" border=0><a href="http://hogehoge.com/">hogehoge</a><br> 画像<img src="gazo_new4.jpg" border=0><a href="http://hogehoge.com/">hogehoge</a><br> 画像<img src="gazo_new5.jpg" border=0><a href="http://hogehoge.com/">hogehoge</a><br> （変更した画像：gokuu.jpg,pikkoro.jpg,bejiita.jpg,gohan.jpg,buruma.jpg,）以上のように画像URL部分のみを gazo_new(連番).jpg に変更させ、変更前の画像URL一覧を表示させるスクリプトを書いてみました。 $htmldata にHTMLの全データが格納されているとします。 $i=1; while($htmldata=~/(<\s*img.*?src.*?=["\s]*)([.\/]*?\/)?((?:(?!gazo_new)[^"\s>])*)?["\s]?.*?>/i){ $imgurlparts .="$3,"; $htmldata=~ s/(<\s*img.*?src.*?=["\s]*)((?:(?!gazo_new)[^"\s>])*)?(["\s]?.*?>)/$1gazo_new$i.jpg$3/i; $i++; } $htmldata .="（変更した画像：$imgurlparts）"; どうにもうまく動きません。何卒ご教示をお願い致します。
- ベストアンサー
- Perl

JavaScript正規表現でimg要素のsrc属性を変更する方法

javascript正規表現がieでうまく動かない