Javascript Convert String to Object

**MiglioreTech** · 11-07-2009 02:02 AM

All -

I know this has to have been answered thousands of times in the annals of history but:

if I have a string representation of a select element (dropdown):

Code:

var str_select = "<select id='test'><option value='1'>Test</option></select>";

and I want to treat this an an dropdown object instead of a string, then traverse through the options as such, what is the best way? The same for other elements e.g.

Code:

str_div = "<div>Some Code</div>";

Thanks!

**astupidname** · 11-07-2009 04:02 AM

Here is one way you can quickly convert a raw html string (provided it is complete in it's representation of the elements within the string) to an xml object and then can traverse it just like any other xml object, but note it's not directly transferable back to html, you would still need to run through the xml elements and make copies of them as DOM objects, but for what it's worth:

Code:

<script type="text/javascript">
//requires a string of xml text as the txt argument,
//returns an xml object identical to what would be returned via ajax as responseXML
function parseXMLString(txt) {
    var i, parser,
        w = window,
        ieParserTypes = [
            "Msxml2.DOMDocument.6.0",
            "Msxml2.DOMDocument.5.0",
            "Msxml2.DOMDocument.4.0",
            "Msxml2.DOMDocument.3.0",
            "Msxml2.DOMDocument.2.0",
            "Microsoft.XMLDOM" //this ones supposedly the same as trying item 5 (version 2.0), but oh well, wanted to keep it
        ];
    if (w.DOMParser) {
        return new w.DOMParser().parseFromString(txt,"text/xml");
    } else if (w.ActiveXObject) {
        for (i = 0; i < ieParserTypes.length; i++) {
            try{
                parser = new w.ActiveXObject(ieParserTypes[i]);
                break;
            } catch (er) {}
        }
        parser.async = false;
        parser.loadXML(txt);
        return parser;
    }
}
var str = '<select id="thisIsSelectId"><option value="opt0">option 0</option>';
str += '<option value="opt1">option 1</option>';
str += '<option value="opt2">option 2</option></select>';
 
var strToXmlObject = parseXMLString(str);
 
var selectId = strToXmlObject.getElementsByTagName('select')[0].getAttribute('id');
alert(selectId);
var options = strToXmlObject.getElementsByTagName('option');
alert("options.length = "+ options.length +"\noptions[1].value = "+ options[1].getAttribute('value'));
</script>

**rnd me** · 11-07-2009 04:48 AM

Code:

String.prototype.toElement=function(){
 var t=document.createElement("div");
 t.innerHTML=this;
return t.getElementsByTagName("*")[0];
}

alert( 
 "<select id='test'>\
   <option value='1'>Test</option>\
   <option value='2'>Test2</option>\
   <option value='3'>Test3</option>\
 </select>".toElement().options[1].value
 );//shows: 2

this code doesn't linke <html>,<link>, and a couple others.
for most content chunks, it's just fine.

**astupidname** · 11-07-2009 05:14 AM

String.prototype.toElement

Hey, that is pretty sweet! Definitely falls in to the category of "why didn't I think of that"! And the best part is it appears to translates to DOM easily:

Code:

<script type="text/javascript">
String.prototype.toElement=function(){
 var t=document.createElement("div");
 t.innerHTML=this;
return t.getElementsByTagName("*")[0];
}
var sel = "<select id='test'>\
   <option value='1'>Test</option>\
   <option value='2'>Test2</option>\
   <option value='3'>Test3</option>\
 </select>".toElement();
alert(sel.options[1].value);
window.onload = function () {
    var div = document.getElementById('divid');
    div.appendChild(sel);
};
</script>
<div id="divid"></div>

Way cool!

**MiglioreTech** · 11-07-2009 07:56 AM

You guys are awesome - I will have jobs lined up for both of you when my company gets bigger. Thanks!

Thread: Javascript Convert String to Object

Thread Tools

Display

Javascript Convert String to Object

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions