JavaScript中的DOM解析

Question

Some background:
I'm developing a web based mobile application using JavaScript. HTML rendering is Safari based. Cross domain policy is disabled, so I can make calls to other domains using XmlHttpRequests. The idea is to parse external HTML and get text content of specific element.
In the past I was parsing the text line by line, finding the line I need. Then get the content of the tag which is a substring of that line. This is very troublesome and requires a lot of maintenance each time the target html changes.
So now I want to parse the html text into DOM and run css or xpath queries on it.
It works well:

$('<div></div>').append(htmlBody).find('#theElementToFind').text()

The only problem is that when I use the browser to load html text into DOM element, it will try to load all external resources (images, js files, etc.). Although it isn't causing any serious problem, I would like to avoid that.

Now the question:
How can I parse html text to DOM without the browser loading external resources, or run js scripts ?
Some ideas I've been thinking about:

• creating new document object using createDocument call ( document.implementation.createDocument() ), but I'm not sure it will skip the loading of external resources.
• use third party DOM parser in JS - the only one I've tried was very bad with handling errors
• use iframe to create new document, so that external resources with relative path will not throw an error in console

Answer 1

It seems that the following piece of code works great:

var doc = document.implementation.createHTMLDocument("");
doc.documentElement.innerHTML = htmlBody;
var text = $(doc).find('#theElementToFind').text();

external resources aren't loaded, scripts aren't being evaluated.

Found it here: https://stackoverflow.com/a/9251106/95624

Origin: https://developer.mozilla.org/en/DOMParser#DOMParser_HTML_extension_for_other_browsers

Answer 2

您可以构造任何html字符串的jQuery对象，而无需将其附加到DOM：

$(htmlBody).find('#theElementToFind').text();