I am developing a page that reads the source of another page and I need to extract certain information out of that page. I currently have the project snagging the live source with the data however I cannot for the life of me figure out how to convert this string into a document.
My rationale for using a document is that I need to use getElementById etc to get the value of these items.
What have I tried?
Assigning the HTML to an invisible div on my page. This kind of works though it doesn't render the entire HTML string and provides a "shorter" rendition of this page.
Manually finding the substrings. As you can imagine this is a crappy way to do things and provides very unreliable results.
DOM parser to convert the doc and then query it but that fails miserably.
Any assistance at all would be seriously appreciated.
pertinent code:
$.ajax({
method: "GET",
dataType: '',
crossDomain: true,
xhrFields: {
withCredentials: true
},
success: function(res) {
//shows the entire source just fine.
console.log("Value of RES: " + res);
bootbox.hideAll();
//shows a "truncated" copy of the source
alert(res);
$("#hiddendiv").html(x);
var name = document.findElementById("myitem");
alert(name);
},
Create a hidden IFRAME on your document. Then set the contents of that IFRAME to the HTML that you want to query. Target that IFRAME with your javascript when you do your querying. See How can I access iframe elements with Javascript? to understand how.
Another (probably better) option, is to use jQuery. jQuery allows you to create HTML, manipulate it, and query against it in memory. Querying DOM elements in jQuery is even easier than it is in pure javascript. See: http://jquery.com/.
//Get a jQuery object representing your HTML
var $html = $( "<div><span id='label'></span></div>" );
//Query against it
var $label = $html.find( "#label" ); //finds the span with and id of 'label'