正規表現を使いhtml内のimgタグから幅と高さを抜き出す方法とは?

このQ&Aのポイント
  • 正規表現を使って、html内のimgタグから幅と高さを抜き出す方法を教えてください。
  • phpで正規表現を使い、htmlのimgタグ内のwidthとheightを個別に取り出し、数字も抜き出したいです。
  • 正規表現に不慣れで、幅と高さを抜き出す方法がわかりません。お知恵を拝借できると嬉しいです。
回答を見る
  • ベストアンサー

正規表現を使いimgタグ内から幅と高さサイズを抜き出し

正規表現を使いimgタグ内から幅と高さサイズを抜き出し phpにて正規表現を使い html の imgタグ内の width = "xxx" height = "xxx" を各々抜き出しその数字も個別に抜き出したいと思っております。 正規表現で行き詰っており、お知恵を拝借できればと思っております。 説明がわかりづらいかと思いますが、よろしくお願いしたいと思います。 下記のような文字列より <img src="http://test.co.jp/img/test01.jpg" alt="テスト画像です。" title="テスト画像です。" width="361" height="640" class="size-full wp-image-100" /> width="361" height="640" を個別に取りだし さらにその中の数字"361"を取り出したいと思っております。 正規表現に不慣れなので、お知恵をお借りいただけないでしょうか。 よろしくお願いいたします。

  • PHP
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • duron
  • ベストアンサー率77% (73/94)
回答No.1

<?php $str='<img src="http://test.co.jp/img/test01.jpg" alt="テスト画像です。" title="テスト画像です。" width="361" height="640" class="size-full wp-image-100" />'; $pattern="/(width=\"([0-9]*)\").*(height=\"([0-9]*)\") /"; if(preg_match_all($pattern,$str,$match)) { var_dump($match); } ?> イメージタグ内の属性の並び順や書式がきっちり決まってるなら上記のような感じで $match[0]にはマッチした全体が $match[1]にはwidth="361"が $match[2]には361が $match[3]にはheight="640"が $match[4]には640が設定されます。 そうでない場合、属性の名前と値をmatchingで取り出して 目的の属性を探すといいと思います。 <?php $str='<img src="http://test.co.jp/img/test01.jpg" alt="テスト画像です。" title="テスト画像です。" width="361" height="640" class="size-full wp-image-100" />'; $pattern="/([^\s]*)=[\"\'](.*?)[\"\']/"; if(preg_match_all($pattern,$str,$match)) { var_dump($match); if($key=array_search("width",$match[1])) { print($match[2][$key]); } } ?> 上のような正規表現(XXX="YYY"とXXX='YYY'はとれますがXXX=YYYはとれません)ですと $match[0]には属性全体(XXX="YYY")が $match[1]には属性の名前XXXが $match[2]には属性の値YYYが設定されます。 $match[1]からarray_searchで目的の属性をせばOKです。

nonchan55
質問者

お礼

duron様、 早々のご回答ありがとうございました。 完璧にできました。 matchingで取り出す方法までご教授いただき、勉強になりました。 どうもありがとうございました。

関連するQ&A

  • 正規表現について

    アメブロから独自ブログへ引越しを行うことになったのですが、 ペタしてね というリンク画像を毎ページに張り付けており、この画像リンクを一括で削除したいと思っています。 HTMLタグのパラメータが微妙にばらついており、正規表現の利用が必要かなと思っています。 専用のプラグインをインストールし、正規表現を利用して削除できることが分かったのですが、 正規表現の方法を数時間勉強してみましたが、結局どうすればいいのかわかりません・・・ 削除する画像リンクは以下のようなものです。 <a href="http://.........................."><img height="100" alt="ペタしてね" src="http://stat.ameba.jp/blog/ucs/img/decoPeta/pc/decoPeta_18.gif" width="100" /></a> width や hight がページによって微妙に違うようです。 どちらさまか、上記のようなタグをマッチングさせる正規表現を教えていただけませんでしょうか。

    • ベストアンサー
    • PHP
  • imgタグについて

    imgタグについて http://okwave.jp/qa/q5970749.html この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。 最初のタグーーーーーーーー img{border: 0; vertical-align:bottom;} ーーーーーーーーーーーーー <img src="/img/space.gif" width="100%" height="10px"/> IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。 ↓そこで、このように分ければいいとアドバイスいただきましたが、 .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} imgタグは他のページでも使用しているため img{border: 0; vertical-align:bottom;}は変更出来ませんでした。 そこで、img2{border : 0;} とcssに書き込み <img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" /> にするとバグは解消されました。 ですが、html的に<img2~ というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか? もし他に方法がございましたら教えてください。 【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン --> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • 正規表現で置換

    その1 $str = "ほげほげほげ<a href="http://xxxx.xxxx.xxx/xxxx/">ほげほげほげ</a>ほげほげ<br /><br /><img src="http://yyy.hoge.jp/hage/hige/xxxx.jpg" width="320" height="240" />ほげほげ"; ↓ $str = "ほげほげほげ<a href="http://xxxx.xxxx.xxx/xxxx/">ほげほげほげ</a>ほげほげ<br /><br /><img src="./foo/faa/fii/xxx.jpg" width="320" height="240" />ほげほげ"; その2 $str = "<img src="http://yyy.hoge.jp/hage/hige/xxxx.jpg" width="320" height="240" />ほげほげほげ<a href="http://xxxx.xxxx.xxx/xxxx/">ほげほげほげ</a>ほげほげ<br /><br /><img src="http://yyy.hoge.jp/hage/hige/xxxx.jpg" width="320" height="240" />ほげほげ"; ↓ $str = "<img src="./foo/xxxx.jpg" width="320" height="240" />ほげほげほげ<a href="http://xxxx.xxxx.xxx/xxxx/">ほげほげほげ</a>ほげほげ<br /><br /><img src="./foo/faa/fii/xxx.jpg" width="320" height="240" />ほげほげ"; このような文字列があった時に、次のように従って置換したいです。 1.imgのタグの内部に、「http://yyy.hoge.jp/hage/hige/xxx.jpg」という文字列があった場合、「./foo/faa/fii/xxx.jpg」という文字列に置き換える。 2.それ以外のURLの場合は置換しない。 3.その1とその2では「xxx.jpg」となっていますが、jpg以外の拡張子の場合も存在する。 4.日本語とURLの位置や個数はバラバラです。 5.URLの中のxxxとyyyは不定の文字列で、hage、hoge、hige、foo、faa、fiiは固定です。 6.使用している言語はPHPです。正規表現を1度だけでできれば理想的ですが、今回は2回に渡った処理でも問題ありません。 以上です。正しく処理できる正規表現、あるいは下記の正規表現の誤りを教えて頂ければ幸いです。 お手数ですが、よろしくお願い致します。 下記の方法では、うまくできませんでした。 $pattern = "/http:\/\/.*?hoge.jp\//"; $replacement = "./"; $str= preg_replace($pattern, $replacement, $str); $pattern2 = '/\/?hage\/hoge/'; $str = preg_replace($pattern2, '/foo/faa/fii', $str);

    • ベストアンサー
    • PHP
  • cssで、imgタグに、背景画像を敷きたい

    cssで、imgタグに、背景画像(影)を敷く方法を教えてください。 ※divタグに敷く方法は分かるのですが、imgタグに敷く方法が分かりません。 ■現状 <HTML> <div id="hoge"> <img src~ <CSS> #hoge img { background-image:url(/images/background_shodow.jpg); background-repeat: none; background:position: ? width:? height:? margin:? padding:?; <影の大きさ> ・width400px ・height200px <写真のサイズ指定> ・width390px ・height190px ※これまでは、 写真のサイズが違うので、 css部分の#hoge img で、 画像の大きさを強制指定してました。 出来れば、 画像の大きさは、html側で指定せずに、 css側で調整したいです。 ムリなら、html側で大きさ指定します。 div枠にcss設定できれば早いかと思いますが、 それが出来ないため(img タグにしかcss指定不可)の相談です。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • vodafoneのimgタグについて

    Vodafoneのページを作りました。 そのページにカウンタを設置しようと思いよくあるimgタグを使いCGIを呼び出そうとしております。 <img src=counter.cgi width=1 height=1> のようにPCやiモードだと画像は「width=1 height=1」の為表示されませんよね。 でもvodafoneの場合?マークの画像が表示されます。 これを表示させないいい方法はありますか? ご教授お願いします。

  • 抽出 正規表現 DOM?

    PHPの正規表現で、例えば <img src="画像ファイル名"...> のようにイメージタグのsrc部分の画像ファイル名を抽出させたいのですが、正規表現の記述の仕方がわかりません。 このようなイメージタグなのですが、imgがIMGだったり、src=画像ファイル名 のように""がなかったり、 alt, width, height, borderなど属性もありますので、正規表現で純粋に画像ファイル名を抽出するのは難しいと考えますが、ふと思ったのですが、DOM???を使えば簡単にできる?かなと思うだけでこれも実現方法がわかりません。 現在、PHP4.3を使っていますが可能でしょうか?

    • ベストアンサー
    • PHP
  • imgタグのmax-widthについて

    画像(40×30)を領域(20×10)に縦横比を維持したまま縮小する際に imgタグにstyle="max-width:20px;max-height:10px;"を指定すること で画像を13×10のサイズで表示することは可能ですか? また、できない場合はどのような方法を用いるべきでしょうか?

  • imgタグとレスポンシブについて

    imgタグとレスポンシブについて imgタグなどのようなインライン要素は、 ブロック要素で囲まないといけないと聞いたのですが、下記のような形でナイトいけないのですよね 下記のように直前にブロック要素で囲まれていないといけないのでしょうか? <div class="copyright"> <img src="img/base/copyright.png" alt="のコピーライト" width="382" height="24" /> </div> 下記のように直前にブロック要素で囲まれていないといけないのでしょうか? それとも直接ブロック要素で囲まれていなくてもずっと先にブロック要素があってそこから入れ子になっていればいいのでしょうか? ~ <td class="copyright"> <address> 〒***-*** **県**市**町 1-5-10 <span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td> ~ 下記はだめですよね。 <H2>画像</H2> <IMG src="img/img0.jpg" width="120" height="90" alt="写真" border="0" align="top"> 文字が上揃えになります<BR> <BR> <IMG src="img/img1.jpg" width="120" height="90" alt="写真" border="2"> 枠の太さを2にしています<BR> <BR> <IMG src="img/img2.jpg" w また、もうひとつになってしまうのですが、下記のimg をフルイドイメージにしたい場合は画像のたて、横はば割る直前のブロック要素のtdのwidthと縦幅(クロームのf12で出てくるpx)で出した%を ul.futtnavi+img { width: 67.3%; height: 18%; } のように入れれば良いのですよね。 tdのサイズは567px,133px imgは382、24です。 うまくぴったりのサイズになりません。 スマホでは消えます。 またtdの中の内容が増えた場合毎回計算しなおさないといけないのでしょうか? ~ <td class="copyright"> <address> 〒***-*** **県**市**町 1-5-10 <span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td>

    • ベストアンサー
    • CSS
  • <IMG>タグにて縦横サイズの指定の仕方

    画像をアップロードさせ、ブログのプロフィール欄に画像が表示されるようなシステムを作っています。 (注※私は開発側で、ブログ利用者としての質問ではありません。) アップロードされてくる画像の縦横の比率や大きさは毎回バラバラなモノがアップロードされてくると思いますが、プロフィール欄の画像枠を200×200pxとして、その範囲に表示画像を収めたい場合はどうすればよいのでしょうか? 例えば <img src=xxx.jpg height=200> と指定した場合、 240×400pxの画像がアップロードされてくれば 120×200pxとして表示してくれますが、 400×240pxの画像がアップロードされてきてしまうと 横幅が200ピクセル以上で表示されてしまいます。 かと言って、 <img src=xxx.jpg height=200 width=200> と指定したのでは 240×400pxの画像の場合、横広がりの引き伸ばし画像で、おデブちゃんみたくで表示されてしまいます。 どなたか解決策ご存知でしたらご教示宜しくお願いします! <IMG>タグでは無くCSSでの方法でも大歓迎です!

    • ベストアンサー
    • HTML
  • 正規表現についての質問です。

    正規表現についての質問です。 現在、HTMLのimgタグを使って「/img/jpg/」ディレクトリにある画像ファイルを複数表示しています。 例) <img src="/img/jpg/1111.jpg" > <img src="/img/jpg/mm2222.jpg" > <img src="/img/jpg/kkkkk3333.jpg" > これをそれぞれ、以下のように置換したいと考えています。 例) <a href="http://www.xxxxx.jp/1111.jpg"><img src="/img/jpg/1111.jpg" width="240px"></a> <a href="http://www.xxxxx.jp/mm2222.jpg"><img src="/img/jpg/mm2222.jpg" width="240px"></a> <a href="http://www.xxxxx.jp/kkkkk3333.jpg"><img src="/img/jpg/kkkkk3333.jpg" width="240px"></a> imgタグをリンクタグで囲むのですが、リンク先URLには元々の画像ファイル名が使われています。また、imgタグには「width="240px"」が付加されています。 このような置換をPHP5で行うには、どのような正規表現を使用したらよろしいでしょうか。 宜しくお願い致します。

    • 締切済み
    • PHP

専門家に質問してみよう