1

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.

1
  • 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 Commented Nov 23, 2013 at 5:19

1 Answer 1

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);
Sign up to request clarification or add additional context in comments.

3 Comments

@zzlalani i love the boxes!
the box is actually for keys like <kbd>ctrl</kbd> + <kbd>F5</kbd>
oh, i know, but can't resist!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.