RegExp Pattern

[Krupa]

I'm working on something that I can't quite get the pattern working for. I'm trying to detect <a> tags and then isolate anything and everything between the <a....> and the </a> so that I can manipulate it and then later add the <a.....></a> back to the HTML.For example, let's say we have this

<a href='LINK'><strong><u>TEXT</u></strong></a>

I am trying to reduce that to what's contained in the <a> tag, manipulate it (mostly adding more HTML) and then wrapping everything back up with the <a> tags.I have been fiddling with patterns for a good hour or so now and I can't seem to get it and I'm back at the drawing board. I thought maybe one of you had a quick solution that I'm just not thinking of.Thanks!

[Ingolme]

You could use HTML DOM to access the elements and then modify their innerHTML property.

var anchors = document.getElementsByTagName("a");for(var i=0; i < anchors.length; i++) {  anchors.innerHTML += "Some extra text";}

[Krupa]

The only problem is that I need to be able to wrap new HTML tags around whatever is inside the <a> tag.

[thescientist]

that's what Ingolme's example is doing. you just have to follow what the code is doing.1) it gets a reference to all elements who have tags of 'a'2) then adds more text to them (by looping through them all and setting their innerHTML)if you need more specification per link, consider using ID's to manipulate specific, individual <a> tags.

[ShadowMage]

The only problem is that I need to be able to wrap new HTML tags around whatever is inside the <a> tag.

Like scientist said, that's exactly what Ingolme is doing. Say you have the following anchor:<a id='google_link' href='www.google.com'>Google Search</a>Now you want to add some styling to the word 'Google' by wrapping it in a span.With Ingolme's example you could get a reference to that anchor and change it's innerHTML. So:

var anchors = document.getElementsByTagName("a");for(var i=0; i < anchors.length; i++) {  if (anchors.id == 'google_link') { //This targets only the google_link div	anchors.innerHTML = "<span style='font-wieght: bold;'>Google</span> Search";  }}

Your anchor will now look like this:<a id='google_link' href='www.google.com'><span style='font-wieght: bold;'>Google</span> Search</a>Notice I also used an id to target only a single anchor (as scientist hinted at). Note though that this is not an efficient way to target a single anchor (you should use document.getElementById for that). This would be beneficial if you wanted to do something for all anchors and then do something special for a specific one. Ex:

var anchors = document.getElementsByTagName("a");for(var i=0; i < anchors.length; i++) {  if (anchors.id == 'google_link') { //This targets only the google_link div	anchors.innerHTML = "<span style='font-wieght: bold;'>Google</span> Search";  }  anchors.innerHTML += "Some extra text";}

This will change the styling like the previous example did, but it will also add the text 'Some extra text' to all anchors.

[thescientist]

and take it up one more notch, you should consider using CSS to style your elements so you don't have to be writing inline styles in your Javascript.

[ShadowMage]

and take it up one more notch, you should consider using CSS to style your elements so you don't have to be writing inline styles in your Javascript.

Good advice. It was a quick example, and I just used inline styles for the demonstrational purposes.

[Krupa]

Didn't think it was that simple. I ended up getting it to work the way I wanted it to, thank you everyone!Also, the reason I'm not using ID's to target certain links or CSS to style them is because it is open for edits; there is no specific anchor or style to be set - it's set by the user.