duanne9313 2012-12-29 17:09
浏览 46
已采纳

HTML操作:匹配前X个HTML标记并移动它们

Let's say I've have the code like this:

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

<p>Some content here.</p>

<img src="003">

What I want to do now is to match the first two images (001 and 002) and store that part of the code in variable. I don't want to do anything with third image.

Id used something like preg_match_all('/<img .*>/', $result); but it obviously matched all the images. Not just those which appear on the top of the code. How to modify that regular expression to select just images that are on top of the code.

What I want to do is to now. I've have <h2> tag with title in one variable and the code above in the second. I want to move the first X images before the <h2> tag OR insert that <h2> tag after first X images. All that in back-end PHP. Would be fun to make it with CSS, but flexbox is not yet here.

  • 写回答

1条回答 默认 最新

  • douzi9430 2012-12-29 18:04
    关注

    You need to divide the problem to solve it. You have got two main parts here:

    1. Division of the HTML into Top and Bottom parts.
    2. Doing the DOMDocument manipulation on (both?) HTML strings.

    Let's just do that:

    The first part is actually quite simple. Let's say all line separators are " " and the empty line is actually an empty line " ". Then this is a simple string operation:

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

    This solves the first part already. Top html is in $top and the rest we actually do not need to care much about is stored into $bottom.

    Let's go on with the second part.

    With simple DOMDocument operations you can now for example get a list of all images:

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

    The only thing you need to do now is to remove each image from it's parent:

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

    And then insert it before the <h2> element:

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

    And you're fine. Full code example:

    $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("
    
    ", $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;
    

    Output:

    <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">
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 对于squad数据集的基于bert模型的微调
  • ¥15 为什么我运行这个网络会出现以下报错?CRNN神经网络
  • ¥20 steam下载游戏占用内存
  • ¥15 CST保存项目时失败
  • ¥15 树莓派5怎么用camera module 3啊
  • ¥20 java在应用程序里获取不到扬声器设备
  • ¥15 echarts动画效果的问题,请帮我添加一个动画。不要机器人回答。
  • ¥15 Attention is all you need 的代码运行
  • ¥15 一个服务器已经有一个系统了如果用usb再装一个系统,原来的系统会被覆盖掉吗
  • ¥15 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时,终端显示出了sequence handled的进度条,但是并不出结果就自动终止回到命令提示行了是怎么回事: