saveHTML函数没有正确地保存HTML

Question

我一直试图使用PHP保存网页部分的源代码。当我提取整个网页的内容时，源代码顺序将被保留，但是当我尝试使用

$dom = new DOMDocument;
$dom->loadHTML($webpage);
$xpath = new DOMXPath($dom);

$query_tag = "//div[contains(@class, 'class-name')]";
$result = $dom->saveHTML($xpath->query($query_tag)->item(0));

脚本标签搞砸了。到目前为止，这是唯一发生这一问题的网站。saveHTML函数有一些我不知道的局限性吗？

这是我应该得到的：

<div id="sponsored-category-header" class="page-header sponsored-category-header clear"> <script type="text/javascript">jQuery(document).ready(function($) {
        var cat_head_params = {"sponsor":"SEO PowerSuite","sponsor_logo":"https:\/\/www.searchenginejournal.com\/wp-content\/plugins\/abm-sej\/includes\/category-images\/SPS_128.png","sponsor_text":"<div class=\"taxonomy-description\">Dominate Google local search results with ease! Get your copy of SEO PowerSuite and keep <a rel=\"nofollow\" href=\"http:\/\/sejr.nl\/PowerSuite-2016-5\" onClick=\"__gaTracker('send', 'event', 'Sponsored Category Click Var 1', 'Local Search', 'SEO PowerSuite');\" target=\"_blank\">your local SEO strategy<\/a> up to par.<\/div>","logo_url":"http:\/\/sejr.nl\/PowerSuite-2016-5","ga_labels":["Local Search","SEO PowerSuite"]}            
        $('#sponsored-category-header').append('<div class="sponsored-category-logo"></div>');
                     $('#sponsored-category-header .sponsored-category-logo').append(' <a rel="nofollow" href="'+cat_head_params.logo_url+'" onClick="__gaTracker(\'send\', \'event\', \'Sponsored Category Click Var 1\', \''+cat_head_params.ga_labels[0]+'\', \''+cat_head_params.ga_labels[0]+'\');" target="_blank"><img class="nopin" src="'+cat_head_params.sponsor_logo+'" width="96" height="96" /></a>');
                                   $('#sponsored-category-header').append('<div class="sponsored-category-details"></div>');
         $('#sponsored-category-header .sponsored-category-details').append('<h3 class="page-title sponsored-category-title">'+cat_head_params.sponsor+'</h3>');
         $('#sponsored-category-header .sponsored-category-details').append(cat_head_params.sponsor_text);


});</script> </div>

这就是我真正得到的：

<div id="sponsored-category-header" class="page-header sponsored-category-header clear"> <script type="text/javascript">jQuery(document).ready(function($) {
        var cat_head_params = {"sponsor":"SEO PowerSuite","sponsor_logo":"https:\/\/www.searchenginejournal.com\/wp-content\/plugins\/abm-sej\/includes\/category-images\/SPS_128.png","sponsor_text":"<div class=\"taxonomy-description\">Dominate Google local search results with ease! Get your copy of SEO PowerSuite and keep <a rel=\"nofollow\" href=\"http:\/\/sejr.nl\/PowerSuite-2016-5\" onClick=\"__gaTracker('send', 'event', 'Sponsored Category Click Var 1', 'Local Search', 'SEO PowerSuite');\" target=\"_blank\">your local SEO strategy<\/a> up to par.<\/div>","logo_url":"http:\/\/sejr.nl\/PowerSuite-2016-5","ga_labels":["Local Search","SEO PowerSuite"]}            
        $('#sponsored-category-header').append('<div class="sponsored-category-logo"></script>


</div>');
                     $('#sponsored-category-header .sponsored-category-logo').append(' <a rel="nofollow" href="'+cat_head_params.logo_url+'" onclick="__gaTracker(\'send\', \'event\', \'Sponsored Category Click Var 1\', \''+cat_head_params.ga_labels[0]+'\', \''+cat_head_params.ga_labels[0]+'\');" target="_blank"><img class="nopin" src="'+cat_head_params.sponsor_logo+'" width="96" height="96"></a>');
                                   $('#sponsored-category-header').append('<div class="sponsored-category-details"></div>');
         $('#sponsored-category-header .sponsored-category-details').append('<h3 class="page-title sponsored-category-title">'+cat_head_params.sponsor+'</h3>');
         $('#sponsored-category-header .sponsored-category-details').append(cat_head_params.sponsor_text);


    }); </div>

如果您错过了它，结束script标记已经移动了几行。

我只想说清楚，我不是在谈论呈现的HTML。我说的是在提出请求后获得的实际源代码。任何关于如何解决这个问题的帮助都将不胜感激。

我知道函数saveHTML导致了这个问题，因为当我通过PHP回显整个页面时，每个标记都位于正确的位置。

Answer 1

首先，您的代码应该触发大量警告，如下所示：

警告: DOMDocument::loadHTML()：htmlParseEntityRef: expecting ';‘在实体中 警告: DOMDocument::loadHTML()：意外结束标记： 警告: DOMDocument::loadHTML()：标签标题在实体中无效

这是预料中的疯狂HTML (并且这个页面的代码也不是特别糟糕)，但您甚至没有提到它，这使我怀疑您可能没有在您的开发框中启用错误报告。

此外，页面中包含大量的JavaScript，而DOMDocument只是一个HTML解析器。

有了这个，我们就能清楚地了解正在发生的事情。因为DOMDocument不是一个成熟的浏览器，所以它不理解JavaScript代码。这意味着它检测到了<script>标记，但是它并不以JavaScript的形式处理它的内容--它只是查找一个结束标记，而他发现的第一个标记是：

$('#sponsored-category-header').append('<div class="sponsored-category-logo"></div>');
                                                                             ^^^^^^

它不知道它是一个JavaScript字符串，应该被忽略。相反，它认为错误的标记被关闭了，因此它试图修复技术上无效的</script>标记，并添加缺少的HTML标记。

由于这个确切的原因，<script>...</script>标记集传统上是这样编写的：

<script type="text/javascript"><!--
var foo = '<p>Escaped end tag<\/p>';
//--></script>

..。因此，不知道JavaScript的用户代理可以安全地忽略整个标记(嘿，这只不过是一个好的旧HTML注释)。然而，现在它几乎被普遍认为是不好的做法，因为“所有的浏览器都理解JavaScript”。

最后注意: DOM扩展可能知道<script>标记，并且知道它不允许在其中包含其他标记。这解释了为什么不考虑内部开始标记。