使用 simple-html-dom 将 img 移动到父段落之前

Question

好吧，我真的被困在了这个：/ 到目前为止，已尝试标题和 DOMDocument 中提到的 SimpleHTMLDom .. $html 将来自我的 Processwire 驱动页面中的 CKEditor，我制作了一个 textformatter 来自动对输出进行后处理。

所以这是测试数据

<?php
$html = <<<_DATA
    <p><img src="http://placehold.it/100x100"><img src="http://placehold.it/130x100">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
_DATA;

这是我的 SimpleHTMLDom 尝试

<?php
$dom = str_get_html($html);
$imgs = $dom->find('img');

foreach ($imgs as $img) {
    $i = $img->outertext;
    $img->outertext = '';
    $img->parent()->outertext = $i . $img->parent()->outertext;
}
echo $dom->save();
$dom->clear();

上面的 $html 中只有一个 img 并且一切都按预期工作，但是这两个（或更多）返回重复。

1. 问题，它改变了排序顺序，所以 130x100 的图像将是第一个。 我知道我在预先设置，但我不知道如何更改它。试图将所有图像填充到一个变量中，以便它们保持有序，但是我不知道如何将它添加到段落中。..

1234563最后两个（正如我所说，1 可以正常工作）

我做错了什么？

这在单独的问题中可能会更好，但我想表明我也尝试过 DOMDocument 但无法让 insertBefore 工作（根本） 我尝试了不同的变体（在下面的代码中未注释）

<?php
include_once "./classes/SmartDOMDocument.class.php";
$dom = new SmartDOMDocument();
$dom->loadHTML($html);

$imgs = $dom->getElementsByTagName('img');

foreach ($imgs as $img) {
    $i = $dom->createElement('img');
    $i->src = $img->getAttribute('src');
    $img->parentNode->insertBefore($i, $img->parentNode);
    // $img->insertBefore($i, $img->parentNode);
    // $dom->insertBefore($i, $img->parentNode);
    $img->parentNode->removeChild($img);
}

echo $dom->saveHTMLExact();

如果某些内容没有得到充分的记录或被问到，请随时发表评论，我会尽力解释得更好:)

编辑： html（来自上面提到的所见即所得）有时会在段落的中间或末尾保存图像，可能包含单个或多个图像（未定义的数量），并且会有该html中有多个段落

编辑：应该包括我希望输出的方式

所以这是输入

<p>
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/130x100">
    <img src="http://placehold.it/160x100">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>

这应该是结果

<div class="inlineGallery">
    <figure><img src="http://placehold.it/100x100"></figure>
    <figure><img src="http://placehold.it/130x100"></figure>
    <figure><img src="http://placehold.it/160x100"></figure>
</div>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>

很抱歉没有提到这些图像应该被包裹在图形中，然后在容器中。单个图像不需要额外的容器，但这实际上并不重要。 我用完整的代码进行了测试。在图中包装图像，在适用的地方添加 figcaption 并将多个图包装在一个 div 中，一切都适用于只有单个图像的文章，然后我在另一篇文章中遇到了一些类似于上面测试数据的 html这导致提到的重复..所以我剥离了代码以查看问题出在哪里没有运气..这就是为什么我只是在问题中添加了这个简单的代码，因为我认为一旦这个工作正常，另一个也可以工作;-)

希望现在更清楚了吗？！

Answer 1

所以这是完成所质疑工作的基本代码

// turn double linebreaks into paragraphs <br><br> to </p><p>
$value = preg_replace('#(?:<br\s*/?>\s*?){2,}#', '</p><p>', $value);

$dom = str_get_html($value);

/* first getting all <p> */
$paragraphs = $dom->find('p');

foreach ($paragraphs as $p) {
    $imgs = $p->find('img');

    /* init gallery container */
    $gallery = "<div class='gallery'>";
    foreach  ($imgs as $img) {
        /* get the current image */
        $i = $img->outertext;
        /* wrap in link */
        $i = "<a href='Link'>$i</a>";
        /* append to gallery */
        $gallery .= $i;
        /* remove original image from paragraph */
        $img->outertext = '';
    }
    /* close new gallery */
    $gallery .= "</div>";
    /* remove unnecessary <br> */
    $newParagraph = trim(preg_replace( '#^\s*(?:<br\s?\/?>)*\s*|(?:<br\s?\/?>)*\s*$#', '', trim($p->innertext)));
    /* wrap tidied text into <p> */
    $newParagraph = "<p>$newParagraph</p>";
    /* replace old paragraph by gallery and new paragraph */
    $p->outertext = $gallery . $newParagraph;
}
// save dom to $value
$value = $dom->save();
// clear dom
$dom->clear();

但谁对我使用它的完整计划感兴趣，应该看看 Processwire 论坛https://processwire.com/talk/topic/13471-better-ckeditor-image-insertion-at-least-for-me/

Answer 2

更新示例 :-)

<?php
    $html = "asdasd <p><img class=\"wrap\" src=\"http://placehold.it/100x100\">    <img class=\"wrap\" src=\"http://placehold.it/130x100\">  <img class=\"wrap\" src=\"http://placehold.it/160x100\">    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p> asdasd    ";

    $pattern = '/(<p>)((<img [^>]+>\s*)+)(.+?)(<\/p>)/i';

    $replacement = '<div class="inlineGallery">${2}</div> ${1} ${4}${5}';
    $html2 = preg_replace($pattern, $replacement, $html);

    $pattern2 = '/(<img class=\"wrap\" [^>]+>)/i';
    $replacement2 = '<figure>${1}</figure>';
    echo preg_replace($pattern2, $replacement2, $html2);
?>

这可能可以在一个正则表达式中完成，但这是我的解决方案。您必须对这些图像进行一些识别才能进行第二次运行。