1

私がこのようなコードを持っているとしましょう：

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

<p>Some content here.</p>

<img src="003">

ここで実行したいのは、最初の2つの画像（001と002）を照合し、コードのその部分を変数に格納することです。3枚目の画像は何もしたくないです。

Idは次のようなものを使用しましpreg_match_all('/<img .*>/', $result);たが、明らかにすべての画像と一致していました。コードの上部に表示されるものだけではありません。その正規表現を変更して、コードの上にある画像だけを選択する方法。

私がやりたいのは今です。1<h2>つの変数にタイトルのタグがあり、2番目の変数に上記のコードがあります。タグの前に最初のX画像を移動するか、最初のX画像の後にそのタグを挿入<h2>します<h2>。これらはすべてバックエンドPHPにあります。CSSで作成するのは楽しいでしょうが、flexboxはまだここにありません。

4

1 に答える 1

2

問題を解決するには、問題を分割する必要があります。ここには 2 つの主要な部分があります。

  1. HTML をトップ部分とボトム部分に分割します。
  2. （両方？）HTML文字列でDOMDocument操作を行います。

やってみましょう：

最初の部分は、実際には非常に単純です。"\n"すべての行区切り記号があり、空の行が実際には空の行であるとしましょう"\n\n"。次に、これは単純な文字列操作です。

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

これで最初の部分はすでに解決しています。トップの html は に$topあり、実際にはあまり気にする必要のない残りの部分は に格納され$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 に答える