Parse string as non-XML HTML5 without loading descendent-elements

There are multiple versions of this question on SO, but none of them really get at the heart of what I'm trying to do. When JavaScript is enabled, the browser sees the contents of the noscript element as unparsed text. I'm using that element to provide all the contents of my site, but for those who do have JavaScript I load the contents with AJAX.

…But then I thought, why make the additional request with AJAX when all the contents are in the noscript? I'll try to grab the pieces I ne开发者_开发问答ed out of the string in the noscript element instead. At first I tried this:

do_stuff_with($($("noscript").text()))

But I soon found that that method causes the browser immediately to make requests for all the replaced elements (images, etc) within the parsed string. (I assume jQuery adds it to the DOM in order to parse it.) Then I glanced at $.parseXML(), but quickly let that idea go because the markup is not XML (it's HTML5 in non-XML form).

Is there some way I can cherry pick elements from the string without making unnecessary HTTP requests?

---

I believe there is no way to parse HTML with jQuery, without adding it to the DOM. However, if you're willing to get a little cheesy, you can avoid requesting unwanted/unneeded assets by modifying the noscript source before you parse it.

HTML

<noscript>
  <span class="name">Mr. Smith</span>
  <img src="/images/02938/avatar.jpg" />
  <span class="age">27</span>
</noscript>

jQuery

// Load raw content, make sure it's wrapped in a single node
raw = '<div>' + $('noscript').text() + '</div>';

// "Fix" any elements that might reference external resources by
// turning them into invalid HTML tags.
raw = raw.replace(/img/g, 'cheese');

dom = $(raw);

// Now we can access our variables without unnecessary resource requests
name = dom.find('.name').text();
age = dom.find('.age').text();

---

A colleague of mine who doesn't have or want an SO account described a solution I think is worth documenting here. While it doesn't answer exactly how to parse arbitrary HTML5 without making immediate requests, it is probably the solution I'll go with.

Said coworker's suggestion was to put each of my includes in separate noscript elements. So instead of having to parse the entire contents in a single long string, I only parse the elements I'm going to display anyway. In this case if they start loading images and resources at parse-time, it's just fine.

It seems so simple now…