Question

Hi I am doing a screen scrape on a weather website that has inline styles in it’s div and has no class or id here is their code:

<div class="TodaysForecastContainer">

                    <div class="TodaysForecastContainerInner">
                        <div style="font-size:12px;"><u>This morning</u></div>
                        <div style="position:absolute;top:17px;left:3px;">
                            <a href="forecastPublicExtended.asp#Period0" target="_blank">
                                <img src="./images/wimages/b_cloudy.gif" height="50px" width="50px" alt="weather image">        
                            </a>                    </div>
                        <div style="position:absolute; top:25px; left:57px; text-align:left; height:47px; width:90px;">
                            Sunny Breaks                            </div>
                    </div>

                    <div class="TodaysForecastContainerInner">
                        <div style="font-size:12px;"><u>This afternoon</u></div>
                        <div style="position:absolute;top:17px;left:3px;">
                            <a href="forecastPublicExtended.asp#Period0" target="_blank">
                                <img src="./images/wimages/b_pcloudy.gif" height="50px" width="50px" alt="weather image">       
                            </a>                    </div>
                        <div style="position:absolute; top:25px; left:57px; text-align:left; height:47px; width:90px;">
                            Mix of Sun and Cloud                            </div>
                    </div>

The problem is the absolute position inline style and they have no class or id, I was hoping I could add a class name and remove inline style on div with “This morning”, div containing the image and also remove the link and the div with discription(ex. Sunny Breaks)also changing all of the TodaysForecastContainerInner since it has about 4 forecast. making it similar to:

<div class="day>This morning</div><div class="thumbnail"><img src="sample.jpg"></div><div class="description">Sunny Breaks</div>

I was using :

foreach($html->find('.TodaysForecastContainerInner div') as $e)
echo $e->innertext . '<br>';

which removes all divs living me with u and img tag,
I just can’t style the div with discription I use img and u tag to style the other two divs, I’m just a beginner at php I hope someone could give me advice thank you so much.

Answer 1

Check out the phpQuery library. It can do jQuery-like manipulation using PHP. This code essentially accomplishes what you are trying to do:

<?php

include 'phpQuery-onefile.php';

$text = <<<EOF
<div class="TodaysForecastContainer">
    <div class="TodaysForecastContainerInner">
        <div style="font-size:12px;"><u>This morning</u></div>
        <div style="position:absolute;top:17px;left:3px;">
                <a href="forecastPublicExtended.asp#Period0" target="_blank">
                        <img src="./images/wimages/b_cloudy.gif" height="50px" width="50px" alt="weather image">        
                </a>
        </div>
        <div style="position:absolute; top:25px; left:57px; text-align:left; height:47px; width:90px;">
            Sunny Breaks
        </div>
    </div>
    <div class="TodaysForecastContainerInner">
        <div style="font-size:12px;"><u>This afternoon</u></div>
        <div style="position:absolute;top:17px;left:3px;">
            <a href="forecastPublicExtended.asp#Period0" target="_blank">
                <img src="./images/wimages/b_pcloudy.gif" height="50px" width="50px" alt="weather image">       
            </a>
        </div>
        <div style="position:absolute; top:25px; left:57px; text-align:left; height:47px; width:90px;">
            Mix of Sun and Cloud
        </div>
    </div>
EOF;

$doc = phpQuery::newDocumentHTML( $text );

$containers = pq('.TodaysForecastContainerInner', $doc);
foreach( $containers as $container ) {
    $div = pq('div', $container);

    $div->eq(0)->removeAttr('style')->addClass('day')->html( pq( 'u', $div->eq(0) )->html() );  
    $div->eq(1)->removeAttr('style')->addClass('thumbnail')->html( pq( 'img', $div->eq(1))->removeAttr('height')->removeAttr('width')->removeAttr('alt') );
    $div->eq(2)->removeAttr('style')->addClass('description');  
}

print $doc;

Result:

<div class="TodaysForecastContainer">
  <div class="TodaysForecastContainerInner">
    <div class="day">This morning</div>
    <div class="thumbnail"><img src="./images/wimages/b_cloudy.gif"></div>
    <div class="description">
      Sunny Breaks
    </div>
  </div>
  <div class="TodaysForecastContainerInner">
    <div class="day">This afternoon</div>
    <div class="thumbnail"><img src="./images/wimages/b_pcloudy.gif"></div>
    <div class="description">
      Mix of Sun and Cloud
    </div>
  </div>