• ベストアンサー

http://から始まる文字列を探してhtmlの画像タグにしたいです。

こんばんわ、以前こちらで質問させて頂いたものです。 今回も「perlの正規表現を使用した自動リンク関数」についての質問です。 かなり上級レベルで全然分かりません。。もし分かる方が居られましたら少しだけでも教えて下さい。首を長くしてお待ちしております。では質問です。 文字列を関数に渡して、その中にhttp://**.xx.xxなどのリンクを発見すると<a href="http://**.xx.xx">http://**.xx.xx</a> のように返す関数を使用してます。(↓参照。この関数はこちらのサイトで教えて頂きました、感謝しております) この関数に追加機能として「マッチしたリンクの拡張子がjpgだった場合、<img>タグとして展開する」という処理を加えたいのです。画像でない場合はリンクのみ、付けます。 ◎http://**.xx.xx.jpg の場合 ↓ <a href="http://**.xx.xx.jpg"> <img src="http://**.xx.xx.jpg"> </a> ◎http://**.xx.xx.xx.html の場合 ↓ <a href="http://**.xx.xx.html"> http://**.xx.xx.html </a> 関数全部でなくても、部分的にでも教えて頂けたらそれらをくっつけて作製してみます。どうかよろしくお願いします。 今 使用している関数 sub change_link(){ $_[0] =~ s/([^=^\"]|^)(http\:[\w\.\~\-\/\?\&\=\@\;\#\:\%]+)/$1<a href=\"$2\" target='_blank'>$2<\/a>/g; }

  • Perl
  • 回答数4
  • ありがとう数6

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

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.3

あんまり深く考えてませんが。 sub change_link(){ $_[0] =~ s/([^=^\"]|^)(http\:[\w\.\~\-\/\?\&\=\@\;\#\:\%]+)/&change_link_sub($1,$2)/ge; } sub change_link_sub(){ my($pre,$url) = @_; my $rtn = $pre . qq|<a href="$url" target="_blank">|; if($url =~ /\.(gif|jpe?g|png)$/i) { # 一応 gif,jpeg,jpg,pngに対応、不要ならjpe?gだけに。 $rtn .= qq|<img src="$url">|; } else { $rtn .= $url; } $rtn .= '</a>'; return $rtn; }

chibamania
質問者

お礼

steel_grayさん、有難うございます! 動作致しました! jpg,gif,pngにも対応とは…もう完璧ですね! 自分はこちらを使わせて頂きます。 正規表現の中で関数が呼べるとは、目からウロコです。加えて、ソースもシンプル。素晴らしいです! これ、steel_grayさんの開発したフリーソースとして公開しても良いレベルだと勝手に思います。この関数が欲しい人は山ほど居ると思うんですよ!(自分は数日間探してみましたが、探せなかったので)。 勝手なことばかり書いてしまいましたが、本当に感謝しております。自分がホームページ開発にperlを使い続ける限り、この関数は無くてはならないものとして、使い続けると思います。 これで面白いホームページが作れそうです。大切に使わせて頂きます。では、有難うございましたーー。

その他の回答 (3)

  • bender
  • ベストアンサー率45% (108/236)
回答No.4

すでに丁寧な回答が寄せられているのですが、以下のような手続きもよいように思います。 (1)http://**.xx.xx.jpg について変換 (2)質問された方がすでに行っている変換 以上の手続きで(1)で変換されたURLは " でくくられているので、(2)では変換の対象にはならないので、(1)→(2)と実行することで、期待した効果が得られるのではないでしょうか。 例、 sub change_link(){ # (1) $_[0] =~ s/([^=^\"]|^)(http\:[\w\.\~\-\/\?\&\=\@\;\#\:\%]+\.jpg)([^\w\.\~\-\/\?\&\=\@\;\#\:\%]|$)/$1<a href=\"$2\" target='_blank'><img src=\"$2\"><\/a>$3/g; # (2) $_[0] =~ s/([^=^\"]|^)(http\:[\w\.\~\-\/\?\&\=\@\;\#\:\%]+)/$1<a href=\"$2\" target='_blank'>$2<\/a>/g; }

chibamania
質問者

お礼

benderさん、ビンゴです!完全動作致しました! この関数、他の方も使われると思います。 誠に感謝致します。 以後は是非、「自信:あり」でお答えください(笑)。 自分の頭では2日考えても分からない問題だったのですが、あっという間でしたね。最後に諦めずに(まぁ諦めた訳ですが(泣))、ここで質問して良かったと思います。 名前も知らない自分に、無償で知恵をくれたことに、今の世の中も捨てた物ではないなと思いました。本当に、本当に、有難うございました。benderさんに良いことが2,3起きますようにお祈り致します。ではまたです。

  • moon_piyo
  • ベストアンサー率60% (88/146)
回答No.2

(1) <a>~</a>をみつけたらそのまま (2) http:~をみつけたら変換 (3) それ以外はそのまま perlのバージョンが古いと .*?という正規表現はつかえないかも... sub change_link {  my($buf) = "";  while ($_[0] =~ m#(<a[\s>].*?</a>)|(http\:[\w\.\~\-\/\?\&\=\@\;\#\:\%]+)|(.)#isg) {   my($p1,$p2,$p3) = ($1,$2,$3);   if (defined($p2)) {    if ($p2 =~ /\.(jpg|jpeg)$/i) {     $buf .= qq{<a href="$p2" target='_blank'><img src="$p2"></a>};    }    else {     $buf .= qq{<a href="$p2" target='_blank'>$p2</a>};    }   }   else {    $buf .= $p1.$p3;   }  }  return $buf; }

chibamania
質問者

お礼

 my($buf) = ""; 辺りでエラーが発生してしまいました。 使用しているperlのバージョンはperl -virsion で調べてみたところ、perl5のようです。 お答え頂き、有難うございます。こちらの方がプログラムっぽくて分かりやすいですね。正規表現はややこしくて…。勉強になりました。有難うございました。

chibamania
質問者

補足

ご回答、本当に有り難うございます。感謝感激っすー。 帰宅後に、皆さんの関数を動作チェックし、報告させて頂きますネ。

回答No.1

 上級レベルという言葉に引かれて、勉強してみたら、 考え方は意外と簡単でした。 考えるのは楽しんですが、きちんと安全にあっているか が、分からん。 ・・・で、誰かに補足要求というか、しばらく空けたまま にしておいてくれたら、嬉しいです。 sub change_link(){ @a = split(/\./, $_[0]); $lst = @a[$#a]; #.で分けて、最後を抽出。 #pngで分岐  if($lst eq 'png'){ $_[0] =~ s/([^=^\"]|^)(http\:[\w\.\~\-\/\?\&\=\@\;\#\:\%]+)/$1<a href=\"$2\" target='_blank'><img src="$2"><\/a>/g;}  else{ $_[0] =~ s/([^=^\"]|^)(http\:[\w\.\~\-\/\?\&\=\@\;\#\:\%]+)/$1<a href=\"$2\" target='_blank'>$2<\/a>/g;} } # END LINK この場合、pngに偽装したperl,もしくは、phpを流しても 大丈夫ですか? 問題はないとは思うけど、実際に確認した事しか、信じら れないので、。^^; 汚染チェックや、危険タグは排除されてると思いますが。 それと、$1の意味がよく分かりません。^^; ネットで調べたら、ついているので、原文そのままで。 あ、もちろん今のままだとpngだけなので、jpeg,jpg,gif は自分で付け加えてください。

chibamania
質問者

補足

ご回答ありがとうございます! 上級レベルという言葉に引かれるなんて素晴らしい向上心だと思います(笑)。他の方の質問にも様々なジャンルでお答えされているようですね(すみません、興味が沸きまして)。自分も他の方にレス出来るように目を光らせたいと思います。…全部自信無しですが(笑)。 ご回答の件ですが、ご説明が足りませんでした。 change_link()関数に渡される引数は自由なSTRINGで、確実にリンク文字があるとは限らず、その数も分からないのです。 例えば以下のようなデータです。 適当適当適当適当適当適当適当 適当適当適当適当適当適当適当 http://***.***.html 適当適当適当適当適当適当適当 http://***.***.jpg 適当適当適当適当適当適当適当 というわけでカンマで区切る方法では駄目なのです。ごめんなさい。 png偽装?というのはよく分かりませんがセキュリティ対策ですよね。ローカル環境(localhost)で使おうと思っているものなのできっと大丈夫(サーバーに迷惑かけず)だと思います。

関連するQ&A

  • リンクで画像を置き換えたい

    初心者ですが、よろしくお願いします。 たとえば 001.jpg 002.jpg 003.jpg という3つの画像ファイルがある場合に、 ---------------------------------- <html> <body> ~省略~ <a href = "#" onclick = "change_img(1)">画像1</a> <a href = "#" onclick = "change_img(2)">画像2</a> <a href = "#" onclick = "change_img(3)">画像3</a> <img src = "XXX.JPG> </body> </html> ---------------------------------- のような感じで画像1,2,3のリンクをクリックすることで、 ページ切り替えるのではなく、 XXX.JPGの部分のみ切り替えるscriptを考えているのですが、 ご教授願いないでしょうか? 要望としては、切替候補の複数の画像は ページをロードしたときに最初に全て読み込んでおいて、 リンククリック時の画像の切替をスピーディにしたいと考えています。 サンプルの上記例にそくしたサンプルのコードなどを 回答いただけると助かります。 よろしくお願いいたします。

  • リンクした画像の大きさをしていするには?

    たとえば、 <a href="a.jpg" target="_blank"><img src="00.gif"> だとして、00.gifからa.jpgにリンクするのですが、 画像が小さいのに、大きな画面の中にその画像が はじっこに出てしまいます。 画像がぴったしになるように大きさを 指定するにはどうしたらいいのですか?

  • 画像と文字を同時に切り替えたい

    お世話になります。どうしてもできなくて困っています。 <script> var n=1; var msg = ["テキスト1", "テキスト2", "テキスト3", "テキスト4", "テキスト5", "テキスト6", "テキスト7"]; function change(){ i++; document.img.src="../img/test" + n+ ".jpg"; } </script> <a href="JavaScript:change();"><img src="../img/test1.jpg" name="img"/></a> <script> document.write((msg[i++])); </script> これで、画像をクリックすると、画像はどんどん切りかわっていきますがその下のテキストが切り替わりません!ずっとテキスト1が出たまんまなんです。どうしたらいいのかわかりません!分かる方、ぜひ教えてください

  • 文字列を抜き出して置換

    《../img.jpg》 と言う文字列を <a href="../img.jpg"><img src="../img.jpg"></a> と言う具合に置き換えて書き出したいのですが、 $text="テスト文章《img.jpg》<br>テスト文章《test.gif》"; $test01=(strpos($text, "《")+2); $test02=(strpos($text, "》")-$test01); $test03=substr($text,$test01,$test02); $test04="<a href=\"".$test03."\"><img src=\"".$test03."\"></a>"; $test_txt=str_replace($test03,$test04,$text); これだと、 「テスト文章<a href="img.jpg"><img src="img.jpg"></a><br>テスト文章《test.gif》」 となってしまい、《../img.jpg》が複数個ある場合の処理がうまく出来ず困っています。 ループ処理すればいいのでしょうけど、どのような方法が適切なのか分かりません。 また、これ以外の方法「preg_match()」などで、いい方法がありましたら、ご教授よろしくお願いします。

    • ベストアンサー
    • PHP
  • jQueryで画像にリンクを張りたい

    HTMLページに <img src="1.jpg" width="50" height="50" id="tes"> というタグがあるのですが、 ページが読み込まれたときに、 そのタグにaタグをつけて <a href="hoge.html" target="_blank"><img src="1.jpg" width="50" height="50" id="tes"></a> とリンクを張りたいのですが以下のような スクリプトを書いてみたのですが、 できません。 <script type="text/javascript"> $(function(){ $('<img />').append($('<a />',{ href:"hoge.html", target:"_blank" }) ) }); </script> jQueryがよくわかっていないのでめちゃくちゃなのだと思いますが、 そもそもこのように画像にaタグをつけることは可能なのでしょうか。 jQueryのバージョンは1.2.6を使っていますが、 新しいバージョンでも構いません。 よろしくお願いします。

  • HTMLのタグについて

    サイトの左にフレームを作り、そのフレームの中にリンクを<a href="link.html" target="_blank">リンク</a>のように、作ってみたのですが、これだと、リンクをクリックすると、新しいページが表示されてしまいました。これを、新しいページではなく、左のフレームをのこしたまま、右にリンクページを表示するにはどうすればよいのでしょうか?よろしくお願いします。

  • 文字の回りこみについて

    7タグという、ホームページ作成参考ページをみながら作り始めています。かずかずあった問題も、これまで自分で解決してこれたのですが、文字の回りこみについて、質問があります。 <IMG SRC="画像名.jpg" align="left">   <A HREF="profile.html">自己紹介</A> <br> <A HREF="link.html">日記</A> <br> <A HREF="link.html">掲示板</A> <br> <A HREF="link.html">リンク</A> と、align="left"という属性を入力すると「自己紹介」という文字が画像の右に表示されず、下に回りこみます、という説明があったのですが、どうやっても無理です。 ふと、ひらめいて、画像の下にスペース<br>を入れてみたら、自己紹介以下の文字列は下にゆくようになりましたが、こんな解決でいいのかなぁと思います。この場合、align="left"も必要ありませんでした。

    • ベストアンサー
    • HTML
  • それぞれの画像をオンマウスのときに違う画像にしたい

    下記【1】の通り、画像のランダムリンクはできたのですが それぞれの画像をオンマウスしたときに 違う画像を表示するにはどうすればよいでしょうか? JavaScriptを使わずに、一枚の画像だけを変える場合は↓のようにやっておりました <a href="http://~" target="_blank" ><img src="img[0] " height="" width="" border="0" onmouseover="this.src='img[0] の色違い画像など';" onmouseout="this.src='img[0] と同じ、もしくは違う画像';"></a> ※例えばimg[0]をオンマウスしたときにimg[2]にしたいのではなく、 それぞれ個別に用意した画像(通常時、オンマウス時、離した後の画像3枚)にしたいのですが。 【1】 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://~"; jmp[1] = "http://~"; jmp[2] = "http://~"; jmp[3] = "http://~"; jmp[4] = "http://~"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");

  • 「戻る」「進む」ボタンで画像を変えるには?

    「戻る」「進む」ボタンで5枚の画像を変えられるようにしたいのですが、なかなかできません。 順番が飛んでしまったりしてしまいます。 var n=0; var imgDB=new Array("kenkyu/0.jpg","kenkyu/1.jpg","kenkyu/2.jpg","kenkyu/3.jpg","kenkyu/4.jpg"); function change(){ if(n==0)n=4; if(n==5)n=0; document.img.src=imgDB[n]; } <TABLE cellpadding="10" bgcolor="#0099cc"> <TBODY> <TR> <TD><IMG src="kenkyu/0.jpg" name="img" width="500" height="400" border="0"></TD> </TR> </TBODY> </TABLE> <A href=JavaScript:n--;change();><IMG src="kenkyu/modoru.jpg" width="96" height="28" border="0"></A>  <A href=JavaScript:n++;change();><IMG src="kenkyu/susumu.jpg" width="96" height="28" border="0"></A><BR> 分かる方、教えて下さい。 よろしくお願い致します。

  • JavaScriptでリンクを設定したい

    JavaScript超初心者です。 サイトで画像やテキストリンクが1ページにとても多く、 リンクアドレスも同一のものが数か所あります。 JavaScriptでリンクを設定すれば、リンクだらけにならないと聞いたので 使ってみようと思ったのですが、上手くいきません。 http://www.openspc2.org/reibun/javascript/link/020/ こちらのサイトを参考にやってみたのですが、 テキストリンク1カ所はできました。 でも、画像リンクはnullと表示されて画像も表示されなくなり、 2個目のテキストリンクはリンクになりません。 <a href="./aaa.html"><img src="./img/aaa.jpg" /></a> <a href="./aaa.html">あああ</a> <a href="./bbb.html"><img src="./img/bbb.jpg" /></a> <a href="./bbb.html">いいい</a> <a href="./aaa.html"><img src="./img/ccc.jpg" /></a> <a href="./aaa.html">ううう</a> このように表示されているリンクを JavaScriptでリンクを設定するにはどうしたらよいでしょうか? よろしくお願いします!