在 php html dom 解析器问题中设置内联样式

Question

您好，我正在一个天气网站上进行屏幕抓取，该网站的 div 中有内联样式并且没有类或 id，这是他们的代码：

<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>

问题是内联样式的绝对位置，它们没有类或 id，我希望我可以添加一个类名并删除带有“今早”的 div 上的内联样式，包含图像的 div 并删除链接和带有描述的 div（例如 Sunny Breaks）也改变了所有的 TodaysForecastContainerInner，因为它有大约 4 个预测。使其类似于：

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

我正在使用：

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

删除所有带有 u 和 img 标签的 div， 我只是无法使用描述设置 div 我使用 img 和 u 标签来设置其他两个 div 的样式，我只是 php 的初学者，希望有人能给我建议，非常感谢。

Answer 1

查看phpQuery 库。它可以使用 PHP 进行类似 jQuery 的操作。这段代码基本上完成了你想要做的事情：

<?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;

结果：

<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>

Answer 2

在客户端比在服务器上更容易。

这个 jQuery+Javascript 将清除你的内联样式并为每个样式应用一个类名：

$(document).ready(function() { 
     var target = $('.TodaysForecastContainerInner div')
         for(var x=0;x< target.length;x++) {
               target.eq(x).attr('style','');
               target.eq(x).addClass("A_"+x)
         }   
})

结果：

<div class="TodaysForecastContainerInner">
    <div style="" class="A_0"><u>This morning</u></div>
    <div style="" class="A_1">
        <a target="_blank" href="forecastPublicExtended.asp#Period0">
            <img height="50px" width="50px" alt="weather image" src="./images/wimages/b_cloudy.gif">        
        </a>                    </div>
    <div style="" class="A_2">
        Sunny Breaks                            </div>
</div>

您可以使用样式表使其看起来像您想要的那样。