DOM parsing in JavaScript - Stack Overflow

admin管理员组

文章数量:1396829

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

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

• javascript
• dom
• xmlhttprequest
• cross-domain
• innerhtml

Share Improve this question Follow asked Aug 15, 2012 at 9:30 m_vitalym_vitaly 12k55 gold badges4848 silver badges6363 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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./a/9251106/95624

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

You can construct jQuery object of any html string, without appending it to the DOM:

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

本文标签： DOM parsing in JavaScriptStack Overflow