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

报告相同问题?

悬赏问题

  • ¥60 pb数据库修改或者求完整pb库存系统,需为pb自带数据库
  • ¥15 spss统计中二分类变量和有序变量的相关性分析可以用kendall相关分析吗?
  • ¥15 拟通过pc下指令到安卓系统,如果追求响应速度,尽可能无延迟,是不是用安卓模拟器会优于实体的安卓手机?如果是,可以快多少毫秒?
  • ¥20 神经网络Sequential name=sequential, built=False
  • ¥16 Qphython 用xlrd读取excel报错
  • ¥15 单片机学习顺序问题!!
  • ¥15 ikuai客户端多拨vpn,重启总是有个别重拨不上
  • ¥20 关于#anlogic#sdram#的问题,如何解决?(关键词-performance)
  • ¥15 相敏解调 matlab
  • ¥15 求lingo代码和思路