1

假设我有这样的代码：

<img src="001">
<img src="002">

<p>Some content here.</p>

<img src="003">

我现在要做的是匹配前两个图像（001 和 002）并将那部分代码存储在变量中。我不想对第三张图片做任何事情。

Id 使用了类似的东西，preg_match_all('/<img .*>/', $result);但它显然与所有图像匹配。不仅仅是出现在代码顶部的那些。如何修改该正则表达式以仅选择代码顶部的图像。

我想做的就是到现在。我在一个变量中有<h2>带有标题的标签，在第二个变量中有上面的代码。我想在标签之前移动第一个 X 图像<h2>或在第一个 X 图像之后插入该<h2>标签。所有这些都在后端 PHP 中。使用 CSS 制作它会很有趣，但 flexbox 还没有出现。

4

1 回答 1

2

你需要划分问题来解决它。您在这里有两个主要部分：

  1. 将 HTML 划分为顶部和底部部分。
  2. 对（两个？）HTML 字符串进行 DOMDocument 操作。

让我们这样做：

第一部分实际上非常简单。假设所有行分隔符都是"\n"，而空行实际上是空行"\n\n"。那么这是一个简单的字符串操作：

list($top, $bottom) = explode("\n\n", $html, 2);

这已经解决了第一部分。顶部$top的 html 保存在$bottom.

让我们继续第二部分。

例如，通过简单的DOMDocument操作，您现在可以获取所有图像的列表：

$topDoc = new DOMDocument();
$topDoc->loadHTML($top);
$topImages = $topDoc->getElementsByTagname('img');

您现在唯一需要做的就是从其父图像中删除每个图像：

$image->parentNode->removeChild($image);

然后在<h2>元素之前插入它：

$anchor = $topDoc->getElementsByTagName('h2')->item(0);
$anchor->parentNode->insertBefore($image, $anchor);

你很好。完整代码示例：

$html = <<<HTML
<h2>Title here</h2>
<img src="001">
<p>Some content here. (for testing purposes)</p>
<img src="002">

<h2>Second Title here (for testing purposes)</h2>
<p>Some content here.</p>

<img src="003">
HTML;

list($top, $bottom) = explode("\n\n", $html, 2);

$topDoc = new DOMDocument();
$topDoc->loadHTML($top);
$topImages = $topDoc->getElementsByTagname('img');
$anchor = $topDoc->getElementsByTagName('h2')->item(0);
foreach($topImages as $image) {
    $image->parentNode->removeChild($image);
    $anchor->parentNode->insertBefore($image, $anchor);
}

foreach($topDoc->getElementsByTagName('body')->item(0)->childNodes as $child)
    echo $topDoc->saveHTML($child);
echo $bottom;

输出：

<img src="001"><img src="002"><h2>Title here</h2>
<p>Some content here. (for testing purposes)</p>
<h2>Second Title here (for testing purposes)</h2>
<p>Some content here.</p>

<img src="003">
于 2012-12-29T18:04:29.757 回答