Javascript Convert String to Object

MiglioreTech · #1 11-07-2009, 03: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 · #2 11-07-2009, 05: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 · #3 11-07-2009, 05: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 · #4 11-07-2009, 06:14 AM

Quote:

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 · #5 11-07-2009, 08:56 AM

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

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)