Extract HTML attributes from String

[bdichiara]

If i was presented with a string, for example:

<tr id="rowId"><td align="left" style="background:#FF0000;">"say" Blah!</td>
<td valign=bottom>S0m3's M0r3's $tuff?</td></tr>

What would be the way of going about pulling out each thing in order to piece it back together for reason of creating a new element. What I'm trying to do is turn something like the string above into this:

var newtr = document.createElement('tr');
newtr.id = 'rowId';
var newtd1 = document.createElement('td');
newtd1.align = 'left';
newtd1.style.backgroundColor = '#FF0000';
newtd1.innerHTML = '"say" Blah!';
var newtd2 = document.createElement('td');
newtd2.valign = 'bottom';
newtd2.innerHTML = 'S0m3\'s M0r3\'s $tuff?';
newtr.appendChild(newtd1);
newtr.appendChild(newtd2);

Note that it could possibly be HTML or XHTML, with quotes or without quotes for the attributes, any range of styles for the elements, slashes added to the single quotes, and an unknown amount of rows. I understand this could be very complicated, but am curious if:
1. There is in fact an easy/shortcut way to do this.
2. If no for #1, then will I need to use fuzzy logic for every possible item?
3. What's the best way to strip out such items to separate them properly?

Thanks for any help.

_______________
_brian.

 

[BillyRayPreachersSon]

The quickest way would be to create a new DIV, set its innerHTML to the string, and then parse its child nodes.

At the point you set the innerHTML, the browser will have done all the ahrd work of parsing, etc, for you... you can them just walk the DOM inside the DIV with no problems.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Just like this old FAQ of mine, in fact:

faq216-6361

(although I created that FAQ for a different reason, the method is identical).

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[bdichiara]

Ok, I see what you're talking about with that FAQ, but it still doesn't address how to split each item in the string (for instance, separate the two table cells) as well as it doesn't explain how to extract each attribute (such as id, align, style + all styles, and valign). It's a good method to string to just the meat of it, but if there's 2 pieces of meat, like in the example above, it runs them both together.

_______________
_brian.

 

[BillyRayPreachersSon]

it still doesn't address how to split each item in the string (for instance, separate the two table cells)

set its innerHTML to the string, [!]and then parse its child nodes.[/!]

You would do this by walking the childNodes collection, (probably using a recursive function) and nextSibling properties of each node.

as well as it doesn't explain how to extract each attribute

Once you have each node (as part of your DOM walking experience), getting the attribute is simply a case of doing something like:

var attrValue = domNode.attrName;

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[monksnake]

I'm guessing there's a better way of going about what you are trying to do once you get your desired result from this post.

<.

 

[BillyRayPreachersSon]

bdichiara,

Did you get any further with this, or do you need help on how to walk the DOM nodes?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[bdichiara]

I got stuck workin on something else, but I will give this a shot either this weekend or early next week. I'll let you know what I figure out and what I need help with. Thanks!

_______________
_brian.