Using jQuery to split a div

Question

I essentially need something like this:

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

to split before and after the image, like this:

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

I've been trying to figure this out for a while now. Any help would be greatly appreciated.

You will have to do this via string manipulation. First read .html() of the structure, then do all nesessery replacements and finally recreating dom element — Comfortably Numb
– Comfortably Numb, Commented Nov 23, 2013 at 5:19

Ruben Kazumov · Accepted Answer · 2013-11-23 05:41:29Z

2

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);

edited Nov 23, 2013 at 5:41

answered Nov 23, 2013 at 5:30

Ruben Kazumov

3,8472 gold badges28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ruben Kazumov Over a year ago

@zzlalani i love the boxes!

zzlalani Over a year ago

the box is actually for keys like <kbd>ctrl</kbd> + <kbd>F5</kbd>

Ruben Kazumov Over a year ago

oh, i know, but can't resist!

Collectives™ on Stack Overflow

Using jQuery to split a div

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related