Parse and handle DOM that came as a string input

Question

Here is the thing,

I have a textarea (with ID "input_container") full of HTML code, the simple example is:

<!doctype html>
<html>
    <head></head>
    <body>
        <a href="www.example.com">the other place</a>
    </body>
</html>

How can I parse it and use it in jQuery as a legitimate DOM? For example, to do

$(varWithDom).find(...)

with that DOM?

What I already tried

I tried to parse it using jQuery but a funny thing happened - jQuery removed the DOCTYPE and all of the HEAD, and left me with nothing but

        <a href="www.example.com">the other place</a>

My original method is here: jQuery HTML parser is removing some tags without a warning, why and how to prevent it?

I never found a solution yet. Any ideas? might this be a bug on jQuery or what?

Which parts do you actually care about? Why does it matter that jQuery strips out everything but the contents of ``? As per the jQuery documentation that [evan quoted in answering your previous question](http://stackoverflow.com/a/8618609/139010), this isn't a jQuery bug - **it's the browser's built-in `.innerHTML` implementation** that's dropping tags. — Matt Ball, Dec 24 '11 at 17:26
@MДΓΓБДLL: It'll matter because if the element queried is a child of `body`, and the `body` is stripped away, then `.find()` won't be able to locate it. `.filter()` would be needed instead. — , Dec 24 '11 at 17:30
In that case just wrap the whole thing up in a `
` as [@am not i am suggests](http://stackoverflow.com/a/8625939/139010). — Matt Ball, Dec 24 '11 at 17:39
Why do you need the elements from the HEAD? Why do you need the DOCTYPE? What is your intention here? — Šime Vidas, Dec 24 '11 at 19:50

score 1 · Answer 1 · 2011-12-24T19:37:59.233

1

If you need the entire content as elements, you might try using an iframe.

 // create and append new iframe
var iframe = document.createElement('iframe');
document.documentElement.appendChild(iframe);

  // set its innerHTML
iframe.contentWindow.document.documentElement.innerHTML = varWithDOM;

  // grab the `window`
var win = iframe.contentWindow;

  // remove the iframe
document.documentElement.removeChild(iframe);

Demo that grabs the head: http://jsfiddle.net/K6tR2/

original answer

It isn't so much jQuery removing it as it is the browser. This behavior will vary in different browsers.

One thing you might try would be to place the entire thing in a <div>, so that becomes your context...

$('<div>' + varWithDom + '</div>').find(...)

Now it won't really matter what is stripped away (unless you actually needed something in the <head>), because it will all be descendant of the outer div.

If you didn't want that, then you'd need to do your query twice, once with .find(), and once with .filter()...

var els = $( varWithDom );
var links = els.find( 'a[href]' ).add( els.filter( 'a[href]' ) );

edited Dec 24 '11 at 19:37

answered Dec 24 '11 at 17:26

I tried that :( it didn't work. jQuery is still stripping the and the doctype, I need to HTML as a whole... The funny thing is, when I try to approach to jQuery selectors in the page I succeed - $('head') works fine, so why not with an external DOM? – Tomer Gal Dec 24 '11 at 18:14
@user1087787: I updated with a solution that uses an `iframe`. Give that a shot. – Dec 24 '11 at 18:56
Just tested it in IE9 and FF - Unfortunately they both got problems parsing it, FF doesn't find tags and IE is giving me this error: Message: Unable to get value of the property 'innerHTML': object is null or undefined Line: 832 Char: 3 Code: 0 URI: http://localhost/form Message: Unable to get value of the property 'find': object is null or undefined Line: 4 Char: 21213 Code: 0 URI: http://localhost/js/jquery-1.7.1.min.js – Tomer Gal Dec 29 '11 at 16:42
I also ran your script from jsfiddle (http://jsfiddle.net/K6tR2/) and it returns errors in IE9 and FF... any suggestions? – Tomer Gal Dec 29 '11 at 16:43

Parse and handle DOM that came as a string input

1 Answers1

Linked