JQuery: Showing source of one <div> in another with a regular expression

**jonuk** · 05:12 PM

Ok I give up and wondered if one of you guys could cast their eye over this for me?

QUICK VERSION:

<div> with id of 'rendered-view' contains the rendered version of:

Code:

<a id="link1">blah blah</a>
<a id="link2" href="http://www.somesite.com"><strong>Visit this site</strong></a>

i.e:
blah blah
Visit this site

I want a <textarea> with id of 'source-view' to contain the actual HTML (without the ids):

Code:

blah blah
<a href="http://www.somesite.com"><strong>Visit this site</strong></a>

I've done the following jQuery which isn't getting me where:

Code:

$('#source-view').replaceWith('<textarea id="source-view">' + $('#rendered-view').html().replace(/<a id="link\d+"( href="*"?)>(<strong>?)(\D+)(<\/strong>?)<\/a>/g, '$2') + '</textarea>');

BIT LONGER VERIOSN:
I have 'rendered-view' showing 'rendered' HTML (clickable links) and 'source-view' showing the actual HTML of whatever is in the rendered view.

I've made it so when the link is clicked the 'href' attribute is removed and the source updates to reflect this. As I don't want a <a id="link1"></a> to show, I do one big regex on the rendered view to remove it. I could remove the 'id' attribute same time as the 'href' but I need it there for an undo button i've got which works great.

I'd be VERY grateful for any tips, I bet it's something simple!