• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:[1-3].jpgを 1jpg 2pg ・・・のようにしたい。)

[1-3].jpgを1jpg 2pg ・・・のようにしたい

zzzzzzの回答

  • zzzzzz
  • ベストアンサー率61% (70/113)
回答No.2

「仕様」と申し上げたのは展開に関しての仕様の意味だったのですが... 仮に、 ・展開部は"["+(数値)+"-"+(数値)+"]"の形式で表されるものとする ・1つの展開可能URL中には展開部は1つしか含まれないものとする という仕様で作ってみます。 但し、2番目の仕様はコードを見やすくするためだけのものですので、 比較的簡単に除くことができます(RegExp.$1に対してmatchを再実行、を再帰的に行う)。 展開処理は、表示とは無関係な処理のため、通常は展開だけを行うルーチンを書く方が良いのですが、 今の場合は、そのようにすると無駄な文字の格納が増えますので、1つのルーチンで展開・表示の両方を行うことにします。 <input type="button" value="クリック" onClick="my1(document.forms['form1'].text1.value)"> のように呼ばれるとした場合、 function my1(str) { if (str.match(/^(.*)\[(\d+)\-(\d+)\](.*)$/) != null) { var win = window.open(); for (var i=Number(RegExp.$2); i<=Number(RegExp.$3); i++) { win.document.write(RegExp.$1 + i + RegExp.$4 + "<BR>\n"); } } else { alert("式が展開可能ではありません。"); } } のようにすれば可能です。 ここで、^(.*)\[(\d+)\-(\d+)\](.*)$という正規表現は、上で定義した仕様1に合致するかどうかをチェックするために使用しています。 正規表現については#1の参考URLを参照してください。 この結果として、例えばstr == "http://www.aaa.com/xxx[1-100].jpg"だった場合、 RegExp.$1 == "http://www.aaa.com/xxx" RegExp.$2 == "1" RegExp.$3 == "100" RegExp.$4 == ".jpg" となります。 つまり、RegExpオブジェクトのメンバ$1に展開部の前の文字列が、$4に後の文字列が、 $2と$3に展開範囲が代入されます。 これを利用してあとはループを回しているだけです。 ただし、strが仕様通りのフォーマットになっていない場合にはstr.match()がnullを返しますので、これで処理を分けています。

norinori55
質問者

補足

ありがとうございます。 ちょっと分からないところがあるので質問します。 ^(.*)\[(\d+)\-(\d+)\](.*)$ の意味ですが、翻訳はこんなぐあいでいいでしょうか。 ***************************************** ^(.*)  行頭はどんな文字でも何文字でもよい。 \[   [という文字を含む文字であること、 (\d+)  0~9までの数字を含んでいること、何桁でもよい。  \-   - という文字を含む文字であること。 \]   ] という文字を含む文字であること。 (.*)$ 文末はどんな文字でも何文字でもよい。 ( )で囲まれているものはあとで、RegExp.$1 RegExp.$2 .... で取り出すことができる。  ******************************************* でも( )ってグループ化するってのがあったのですがそれとは違うのでしょうか?例えば(\d+) は 0~9までの数字という意味の\d 1文字以上という意味の+ この二つの条件を合体させるという意味で( )が使われていると思いました。   それから、他にもわからないところがあります。 if (str.match(/^(.*)\[(\d+)\-(\d+)\](.*)$/) != null) の意味です。 str.match(■)の意味ですが、 ”■と同じものを文字列が格納されているstrから抽出する。” は分かったのですが、 !=null の意味がわからないです。 nullって 偽という意味なのかしら?? 0? 何もないという意味??str.match(■)!=null ということは、マッチするものが無いということ?? あれれ という状態です。 if(条件式){ 条件成就の場合 }else{ 条件が成り立たない場合 } は分かっているのですが。 もう少しで理解できそうなのです。 教えてください。 ご面倒かけて申し訳ないです。 今 http://tohoho.wakusei.ne.jp/wwwjsreg.htm  を見ながら考えてます。

関連するQ&A

  • [020-150]を020jpg 021jpg・・・と展開したい。

    http://www.okweb.ne.jp/oshiete_new.php3 の質問のつづきです。 http://www.aaa.com/xxx[020-150].jpg を http://www.aaa.com/xxx020.jpg http://www.aaa.com/xxx021.jpg 以下このようなものが、 http://www.aaa.com/xxx150.jpgになるまで 一覧表示される。 このようなスクリプトを教えてください。  forを用いてループさせるのは分かるのですが どのように頭に”0”をつけて桁あわせすればよいかわからなくて。 http://www.okweb.ne.jp/oshiete_new.php3 を見ながら自分なりに考えているのですが、 [020-150]の020部分の桁数をしらべて。 その桁数-Iの桁数=頭につける0の数・・・・ Iは forの中のループに使用される数で・・・ えーっと、すいません、混乱してます。  ちなにみ桁をあわせない場合は次のようになります。 zzzzzzさん、大変お世話になりました。 正規表現の便利さを実感しました。 ************************************* <HTML> <HEAD> <TITLE>URLを展開</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- Hide script from old browser function my1(str) { if (str.match(/^(.*)\[(\d+)\-(\d+)\](.*)$/) != null) { var win = window.open(); for (var i=Number(RegExp.$2); i<=Number(RegExp.$3); i++) { win.document.write(RegExp.$1 + i + RegExp.$4 + "<BR>\n"); } } else { alert("式が展開可能ではありません。"); } } // end Hiding --> </SCRIPT> </HEAD> <BODY BGCOLOR="#D0D0D0"> <FORM NAME="form1"> <input type="text" name="text1"value="" size="60"> <input type="button" value="クリック" onClick="my1(document.forms['form1'].text1.value) "> </FORM> </BODY> </HTML> *************************************

  • テキストエリアの内容を配列に格納

    テキストエリアに次のように入力されたとします。 --------------------------------- http://www.aaa.com/xxx[1-3].jpg http://www.bbb.com/xxx[1-3].jpg http://www.ccc.com/xxx[1-3].jpg --------------------------------- この値をURL[0]=http://www.aaa.com/xxx[1-3].jpg [1]=http://www.bbb.com/xxx[1-3].jpg [2]=http://www.ccc.com/xxx[1-3].jpg というように配列に格納したいのですが、どのようなスクリプトのなりますでしょうか。 *もしよろしければ次の質問にもお答えいただければ幸いです。 URLを展開するスクリプトを考えてます。過去になんどか質問させていただきました。 http://www.okweb.ne.jp/kotaeru.php3?q=252505 http://www.okweb.ne.jp/kotaeru.php3?q=247951 今回の質問もその続きになるのですが、今度はテキストエリアに複数のURLを入力しそれぞれを展開する方法を考えてます。 どうすすめていいか、きっかけがつかめなくて。 ひとまづ配列に格納してそれから、関数を呼び出せばいいのかなと思ってますが最初からつまづきました。 

  • 更新ごとに重複しない画像を5枚表示

    初心者です。よろしくお願い致します。 複数ページ存在するうちの、各ページを更新するごとにランダムに変わる、重複しない5枚の画像を表示させたいと思います。 今現在、サイト上に掲載されてあったJavaScriptのサンプルを自分なりに変更してテストしているのですが、「重複しない」というところで壁にぶち当たってしまっています。 下記が現在のスクリプトです。 <body> <script language="JavaScript"><!-- jumpURL = new Array(); imgURL = new Array(); jumpURL[0] = "アドレス"; jumpURL[1] = "アドレス jumpURL[2] = "アドレス"; jumpURL[3] = "アドレス"; jumpURL[4] = "アドレス"; jumpURL[5] = "アドレス"; jumpURL[6] = "アドレス"; jumpURL[7] = "アドレス"; imgURL[0] = "top_img01.jpg"; imgURL[1] = "top_img02.jpg"; imgURL[2] = "top_img03.jpg"; imgURL[3] = "top_img04.jpg"; imgURL[4] = "top_img05.jpg"; imgURL[5] = "top_img06.jpg"; imgURL[6] = "top_img07.jpg"; imgURL[7] = "top_img08.jpg"; a = Math.floor(Math.random()*jumpURL.length); document.write("<a href='"+jumpURL[a]+"'>"); document.write("<img src='"+imgURL[a]+"' border='0'><br>"); document.write("</a>"); b = Math.floor(Math.random()*jumpURL.length); document.write("<a href='"+jumpURL[b]+"'>"); document.write("<img src='"+imgURL[b]+"' border='0'><br>"); document.write("</a>"); c = Math.floor(Math.random()*jumpURL.length); document.write("<a href='"+jumpURL[c]+"'>"); document.write("<img src='"+imgURL[c]+"' border='0'><br>"); document.write("</a>"); d = Math.floor(Math.random()*jumpURL.length); document.write("<a href='"+jumpURL[d]+"'>"); document.write("<img src='"+imgURL[d]+"' border='0'><br>"); document.write("</a>"); e = Math.floor(Math.random()*jumpURL.length); document.write("<a href='"+jumpURL[e]+"'>"); document.write("<img src='"+imgURL[e]+"' border='0'><br>"); document.write("</a>"); // --></script> </body> 現在では、画像枚数が8枚ですが、4、50枚に増える予定です。 また、スクリプトを書きやすくするために画像ファイルの名前をどのように変更してもかまわないと思っています。 上記のスクリプトは5枚の画像が表示されることはされるのですが、更新してから表示するまでの待ち時間が長いのが気になるので、できれば、欲を言うならば、早く表示してくれるようなスクリプトをご伝授していただければと思います。 よろしくお願い致します。

  • セレクトの値を取得できない

    <select name='aaa' id='aaa'> <option value='5'>5</option> <option value='6'>6</option> </select> <script> var bbb = document.getElementById('aaa'); document.open(); document.write(bbb); document.close(); </script> のように書いたのですが [object HTMLSelectElement] と表示されます。 何がいけないのでしょうか?

  • javascriptの中にjavascript

    if( agent.search(/iPad|iPhone/) != -1 ){ document.write( '<img src="assets/images/ph05.jpg" /><script type="text/javascript">$(\'.fondos\').galleria({transition: \'flash\',transition_speed: 5000,thumbnails: false,show_imagenav: false});</script></div>' ); }else{ document.write('<object>・・・</object>' ); } </script> のスクリプトなのですが、 最初のdocument.write( ’・・・ の中に<script ・・・と書いているせいで、エラーとなります。 document.writeの中にscriptをかきたいのですが、どうすればいいでしょうか。 申し訳ございませんが、具体的に教えたください!!

  • javaで画像をランダム表示しつつリンクさせたい

    自分のブログ(FC2)上部にJavaスクリプトを使い、自作のランダム画像&各画像にそれぞれ指定したリンクを貼りたいのですが、画像までは出来ましたがリンクの方法が分からず困っております。 Tool No.3 『画像ランダム表示スクリプト生成』 ttp://ssl.netlaputa.ne.jp/blg/tools/randimg.php ↑こちらのサイトで作成できる物のように動作させたいのですが、 上のサイトで作った物だと自分のブログでは表示が崩れて動作しませんでした。 自分なりに調べたところ、以下のコードだと画像は綺麗に表示されたのですが、 リンクはどうしたら出来るのかが分かりません。 なんとか以下のコードを改変して、リンクも付けられないでしょうか。 gehe2.jpgをクリックすると、gehe2.htmlに飛ぶというようにしたいです。 <SCRIPT LANGUAGE="JavaScript"> <!-- e = Math.floor(Math.random() * 6) { document.write('<style>') if (e == 0) { document.write('#header-text{background-image:url(http://www.hoge.com/hoge/gehe2.jpg);}') } else if (e == 1) { document.write('#header-text{background-image:url(http://www.hoge.com/hoge/gehe3.jpg);}') } else if (e == 2) { document.write('#header-text{background-image:url(http://www.hoge.com/hoge/gehe4.jpg);}') } else if (e == 3) { document.write('#header-text{background-image:url(http://www.hoge.com/hoge/gehe5.jpg);}') } else if (e == 4) { document.write('#header-text{background-image:url(http://www.hoge.com/hoge/gehe.jpg);}') } else { document.write('#header-text{background-image:url(http://www.hoge.com/hoge/gehe3.jpg);}') } document.write('</style>;') }; --> </SCRIPT>

  • javascriptで画像のランダム表示設定

    いつもお世話になっております。 過去に類似した質問が挙げられてましたが、 解決に至らなかったので、 質問させて頂きます。 javascriptを使用して、 3枚の画像をランダム表示されるように設定したいと思っております。 できれば、更新毎に常に異なる画像が表示されるようにしたいです。 ちなみに全体に適用ではなく、特定のボックスのみです。 こんな感じで現在は指定しております。 <div class="section1"> <img src="photo/xxx.jpg" alt="xxx" /> </div> ここのimgをランダム表示にしたいのですが、 どうも上手くいきません。 <script language="javascript"> <!-- // ランダムに画像を表示する img = new Array(); // 画像のアドレス img[0] = "photo/xxx.jpg"; img[1] = "photo/yyy.jpg"; img[2] = "photo/zzz.jpg"; n = Math.floor(Math.random()*img.length); document.write("<IMG src='"+img[n]+"' border='0'>"); document.write("</A>"); //--> </script> をbody内に挿入したのですが、 ダメでした。 ご指導の程宜しくお願い致します。 ちなみに当方、プログラムを自力で記述する能力が無いので、 できれば、ソースを明示して頂けると大変助かります。

  • サムネイル画像をオンマウスで拡大表示してそれぞれの画像にリンクを指定する記述について

    お世話になります。 JavaScript初心者ですが、フリーソースなどを見つつ勉強しております。 下記のようなhtmlに【js00】と【js01】を読み込んでサムネイル画像をオンマウス時に上部に拡大表示させているのですが、サムネイル画像と拡大表示画像の両方に指定リンクをつけようとしています。 記述4の【js02】のような画像をランダム表示して指定リンクをつけるScriptは発見できたのですが、これを記述1+2+3と組み合わせられず、作業が進まなくなってしまいました…。 フリーソースを応用しようとしすぎて、遠回りな記述になっているかもしれませんが、もし分かる方がいらっしゃったら教えて頂けないでしょうか? ■記述1(html) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <SCRIPT language="JavaScript" type ="text/javascript" src="http://test.com/00.js"> </SCRIPT> </head> <body> <table width="400"> <a href="#" target="_blank"> <img src="http://test.com/img/01.jpg" name="imgSample"></a> <div> <div> <script language="JavaScript" type ="text/javascript" src="http://test.com/01.js"> </script> </body> </html> ■記述2(js00) //画像の名前を配列に代入していきます。 strPictureName = new Array("http://test.com/img/01.jpg","http://test.com/img/02.jpg","http://test.com/img/03.jpg","http://test.com/img/04.jpg","http://test.com/img/05.jpg","http://test.com/img/06.jpg","http://test.com/img/07.jpg","http://test.com/img/08.jpg"); function SetPicture(nVal) { document.imgSample.src = strPictureName[nVal]; } ■記述3(js01) //サムネイル画像をオンマウスで拡大表示 img_num="8"; if( img_num == "" ){img_num='5';} for ( cnt = 1 ; cnt <= img_num ; cnt++ ) { cnt2 = cnt-1; document.write( "<a href=\"#\" onMouseOver=\"SetPicture("+cnt2+");\" class=\"menu\"><img src=\""http://test.com/0"+cnt+".jpg\" width=\"100\" height=\"86\"></a>" ) ; } ■記述4(js02) // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://www.yahoo.co.jp/"; jmp[1] = "http://bb.yahoo.co.jp/"; jmp[2] = "http://www.yahoo.co.jp/"; jmp[3] = "http://auctions.yahoo.co.jp/"; jmp[4] = "http://aeu.jp/cs/"; jmp[5] = "http://google.com/"; jmp[6] = "http://google.co.jp/"; jmp[7] = "http://news.yahoo.co.jp/"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "http://test.com/01.jpg"; img[1] = "http://test.com/02.jpg"; img[2] = "http://test.com/03.jpg"; img[3] = "http://test.com/04.jpg"; img[4] = "http://test.com/05.jpg"; img[5] = "http://test.com/06.jpg"; img[6] = "http://test.com/07.jpg"; img[7] = "http://test.com/08.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>"); ■完成イメージ   | ̄ ̄ ̄ ̄ ̄ ̄ ̄|   |  拡大画像  |   |_______|   | ̄|| ̄|| ̄|| ̄|   |_||_||_||_|←サムネイル ・サムネイル画像をオンマウスで拡大画像を表示 ・サムネイル画像、拡大画像それぞれに指定リンクを入れる ・可能であればリンクページは target="_blank" で開きたい 以上がご質問内容です。 初心者で大変恐縮ですが、どうぞよろしくお願いいたします。

  • Apacheのドキュメントルートを複数設定する事は可能ですか?

    こんにちは。 www.aaa.comというwebサイトのドキュメントルートの設定を DocumentRoot /home/web/aaa/html  と設定しています。これを複数にすることは可能でしょうか? 例:DocumentRootを /home/web/aaa/html   と  /home/web/bbb/html の二つにして、どちらのディレクトリにもアクセスできるようにしたいのです。 /home/web/aaa/html/xxx.html へはwww.aaa.com/xxx.htmlでアクセスできますが、ドキュメントルートを複数設定することによって /home/web/bbb/html/yyy.html にも www.aaa.com/yyy.html でアクセスできるようにする方法というのはありますでしょうか?

  • このスクリプトのどこが間違っているか教えてください

    ブラウザウィンドウの背景を10秒ごとに、 1.jpg→2.jpg→3.jpg・・・ というふうに変化させたいとします。 以下のスクリプトを考えたんですが、 「オブジェクトを指定してください。」 とエラーが出ます。 ただ単に背景を表示させるだけならうまくいくのですが、 setTimeoutメソッドを追加して背景を変化させようとすると エラーが出ます。 一体どのようにすればうまくいくのでしょうか? よろしくお願いします<(_ _)> ********************************************* <html> <head> <script> <!-- function FUNC(){ jikan=new Date(); ss=jikan.getSeconds(); if(ss>=0 || ss<10){ document.write("<body background='1.jpg'>"); } if(ss>=10 || ss<20){ document.write("<body background='2.jpg'>"); } if(ss>=20 || ss<30){ document.write("<body background='3.jpg'>"); } if(ss>=30 || ss<40){ document.write("<body background='4.jpg'>"); } if(ss>=40 || ss<50){ document.write("<body background='5.jpg'>"); } if(ss>=50 || ss<60){ document.write("<body background='6.jpg'>"); } setTimeout("FUNC()",1000); } //--> </script> </head> <body onLoad="FUNC()"> </body> </html> *********************************************