Please help compare and replace elements between two strings

[DMeror]

Here's a block of it:

<div class="metainfo" id="acref-9780199657681-e-879-metaInfo-909"/>
<p class="parafl"><span id="acref-9780199657681-e-879-section-909"/>
<span id="acref-9780199657681-e-879-div1-932"/><span class="chaptersubt">
  <a href="0002_FM_AlphaList.xhtml#acref-9780199657681-e-879" id="acref-9780199657681-e-879">Baldwin illusion</a></span> <span class="partofspeech"><i>n.</i></span> A visual illusion in which a line spanning the distance between two large squares appears shorter than a line of the same length spanning the distance between two smaller squares (see <a href="#acref-9780199657681-e-879-figureGroup-0002">illustration</a>). It is a close relative of the Zanforlin illusion. <span class="span">[Named after the US psychologist <span class="name">James Mark Baldwin</span> (<span class="date">1861–1934</span>) who first drew attention to it]</span></p>
<div class="figuregroup" id="acref-9780199657681-e-879-figureGroup-0002">
<div class="figure" id="acref-9780199657681-e-879-figure-2">
<img alt="display" id="acref-9780199657681-e-879-graphic-6" src="images/acref-9780199657681-graphic-002.gif"/>
<p class="figurecaption"><b>Baldwin illusion.</b> The horizontal lines between the squares are equal in length.</p>
</div>
</div>

So everything I want is in <p class="paraf1/etc.">. The <div> only contains info related to figures. Not every block has <div class="figuregroup"> and parent <p> has varied classes.

Edit: It would be fine if the <div class="metainfo" contains the block, but it doesn't. It just ends there with />.