查找、获取 html 并将其添加到元素答案

【问题标题】：Find, get and add html to an element查找、获取 html 并将其添加到元素
【发布时间】：2011-07-17 09:08:51
【问题描述】：

我有一个包含文本和一些 html 元素的字符串。我想找到具有类 size-thumbnail 的 img 元素并在其周围添加一些 html。

例如，发件人：

<img class="size-thumbnail wp-image-279 alignleft" title="fellaisworkinghard" src="workinghard-150x150.png" alt="" height="150" width="150">

收件人：

<div style="width:150px;" class="article-image">
    <img class="size-thumbnail wp-image-279 alignleft" title="fellaisworkinghard" src="workinghard-150x150.png" alt="" height="150" width="150">
    <span style="width:150px;" class="article-image-content">BLABLA</span>
</div>

div 和 span 元素的宽度取自图像的宽度。这样做的最佳方法是什么？如何做？

我想过使用正则表达式来获取高度，但我不知道如何在正确的位置添加其他所有内容。

【问题讨论】：

（相关） Best Methods to parse HTML
由于这个标记的Wordpress，最简单的方法是在生成初始img标签的位置更改它，而不是稍后更改它，例如更改生成的 PHP 代码以直接添加附加标记。
@Gordon 是的，我正在编写一个过滤器函数来添加它。如果我能在此之前添加它会很棒，但是由于我正在编写一个主题，我不想更改根文件。

标签： php regex wordpress

【解决方案1】：

你总是可以把 jQuery 扔给它。让您的主题加入 jquery 队列，并将其添加到您的标题中。

jQuery(document).ready( function () {
    jQuery(".size-thumbnail").wrap("<div style='width:150px;' class='article-image'/>");
    jQuery(".size-thumbnail").after("<span style='width:150px;' " + 
                                    "class='article-image-content'>BLABLA</span>");
});

不是最优雅的解决方案，但它会产生理想的结果......

【讨论】：

【解决方案2】：

您可以使用http://www.php.net/manual/en/class.domelement.php DOM 元素来查找和操作 HTML。

我也在使用和推荐http://framework.zend.com/manual/en/zend.dom.query.html Zend_Dom_Query 来查找和操作html。它完美地工作。

（如果您想在同一页面上进行此操作，您需要缓冲、操作并将其刷新到浏览器。）

【讨论】：

我从来没有使用过这个，但是页面是动态的，所以内容只是一个字符串。从来没有一个html页面。它看起来像这样：数据库 -> 我的代码 -> echo
好的，我明白了。您需要从您的 Wordpress 模板中更改它。
@Patrik 它是一个完整的 html 页面还是一个片段并不重要（很多）。 DOM 可以处理。 Zend_Dom 位于 DOM 之上并添加 CSS 选择器。
如果你使用 Zend_Dom 你可以选择像 $dom->query('#content .post img')
我似乎无法让它工作。我试过这个只是为了看看我是否得到了一些东西：get file height $dom = new DOMDocument(); $dom->load($content); $dom->getAttribute('class'); print_r($dom);但我收到服务器错误 500