4

I have a textarea with the following content (innerHTML):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>

</body>
</html>

To prepare the content for DOM parsing with jQuery I do the following (temp is just a div):

$('#temp').append(input.val());

console.log($('#temp').html());

As pointed out at jQuery object from complete HTML document, the head, body, html and doctype tags are gone:

<meta charset="utf-8">
<title></title>

So is there any other way not to append to the DOM and still get DOM elements to work with? Iframe may be a last resort but that would be ugly.

Community
  • 1
  • 1
DADU
  • 6,482
  • 7
  • 42
  • 64
  • So what is it that you want to keep? You don't necessarily have to append it to the DOM, you could do `$('
    ').append(input.val())`.     – Felix Kling Mar 16 '11 at 17:39
  • 3
    What exactly do you want to accomplish? – Šime Vidas Mar 16 '11 at 17:41
  • I want to keep everything that's inputted in the textarea, including html, body, head and doctype tags. – DADU Mar 16 '11 at 17:43
  • @DADU But what do you want to do with it? Append it to the DOM? You cannot append HTML, HEAD and BODY elements to the DOM. – Šime Vidas Mar 16 '11 at 17:44
  • @Šime Vidas I want to have the contents from the textarea as DOM elements without the browser removing html, body, head and doctype tags. – DADU Mar 16 '11 at 17:45
  • @Šime Vidas The real goal is to parse the elements (change some things here and there) and than output them again in a textarea (after they have been html entity encoded). – DADU Mar 16 '11 at 17:46
  • @DADU: Why do you want to *append it*? – ifaour Mar 16 '11 at 17:46
  • @ifaour I don't necessarily want to append it. It's just the way I can get them as DOM elements to work with. – DADU Mar 16 '11 at 17:47
  • 1
    you can just have them in a variable, or even store them using [data](http://api.jquery.com/data/) – ifaour Mar 16 '11 at 17:48
  • @ifaour Can you give an example of this? I've tried lots of things but probably overlooked the real solution. – DADU Mar 16 '11 at 17:49
  • 1
    @DADU What changes do you want to make on that HTML string? Can you give some examples? – Šime Vidas Mar 16 '11 at 17:52
  • @Šime Vidas Sure. For example change the doctype, remove attributes on the style and script tags (type=""), add an extra script tag, rewrite attributes (example selected="selected" -> selected), ... – DADU Mar 16 '11 at 17:56
  • @DADU Have you considered manipulating the HTML string directly (using regex)? – Šime Vidas Mar 16 '11 at 18:06
  • @Šime Vidas Yes. That's the reason why I am doing it with jQuery. First I did it with some regular expressions in PHP but that's not a good idea since these regexes can get pretty complicated. On the contrary, jQuery is very good in DOM traversing and manipulating. – DADU Mar 16 '11 at 18:14
  • 1
    @DADU jQuery cannot parse HTML, HEAD, BODY and DOCTYPE elements. Therefore, you cannot use jQuery's HTML parsing abilities in your case. What you need is a script that can parse a full HTML string into a document fragment object. I am not aware of such a script. – Šime Vidas Mar 16 '11 at 18:28
  • @Šime Vidas Thanks. Maybe this method will provide some results: http://stackoverflow.com/questions/1034881/what-is-the-best-practice-for-parsing-remote-content-with-jquery – DADU Mar 16 '11 at 18:50
  • 2
    @DADU Check out this article: https://developer.mozilla.org/en/Code_snippets/HTML_to_DOM – Šime Vidas Mar 16 '11 at 18:59
  • 1
    @Šime Vidas Thanks, that's some valuable information! I also found http://code.google.com/p/phpquery/ which might be a good fit since it shares a lot of jQuery's API and behavior without the restrictions on a HTML document inside a HTML document. – DADU Mar 16 '11 at 19:09

1 Answers1

4

You could do this..

 $(input.val()).find('your-selector')

Or, you could pass it as context..

$('your-selector', $(input.val()))
Robin Maben
  • 22,194
  • 16
  • 64
  • 99