Использование JQuery для разделения DIV

Question

Я по существу нужно что-то вроде этого:

<div class='one'>Lorem 
    <p>Ipsum 
    <img src="image.jpg" /> 
    sit a</p> lor 
</div> 

расколоть до и после изображения, как это:

<div class='one'>Lorem <p>Ipsum</p></div> 
<img src="image.jpg" /> 
<div class='one'><p>sit a</p> lor</div> 

Я пытался понять это какое-то время. Любая помощь будет принята с благодарностью.

Answer 1

DEMO

var source = $(".one").html(), 
result = source.replace(/([^<]+<p>[^<]+)(<img[^>]+>)([^<]+<\/p>[^<]+)/im, "$1</p></div>$2<div class='one'><p>$3"); 
result = result.replace(/\n/ig, " ").replace(/\s+/ig, " ");// this line is optional 
$(".one").html(result);