views:

55

answers:

5

For example in javascript code running on the page we have something like:

var data = '<html>\n  <body>\n  I want this text ...\n  </body>\n</html>';

I'd like to use and at least know if its possible to get the text in the body of that html string without throwing the whole html string into the DOM and selecting from there.

+1  A: 

The correct answer to this question, in this exact phrasing, is NO.

If you write something like var a = $("<div>test</div>"), jQuery will add that div to the DOM, and then construct a jQuery object around it.

If you want to do without bothering the DOM, you will have to parse it yourself. Regular expressions are your friend.

Fyodor Soikin
Is it bad to dynamically add tags like <html> dynamically to a hidden div? Will it mess up the page at all? I know it definitely won't be valid html but I suppose I could do something like:<div style="display:none" id="data"><html>iojwi</html></div>and then do something like$("#data html").html();
Travis
Yes, you can do this, and yes, it will work. Reference to "valid HTML" is not relevant here, because, once the HTML has been parsed by the browser, it is not HTML anymore, but rather a DOM tree. I must also add that you don't have to wrap it in a div. You can just plainly pass that whole string to the `$()` function, and it should return a jQuery object that represents your `html` tag.
Fyodor Soikin
A: 

Before throwing it in the DOM that is just a plain string.

You can sure use REGEX.

Frankie
+1  A: 

It would be easiest, I think, to put that into the DOM and get it from there, then remove it from the DOM again.

Jquery itself is full of tricks like this. It's adding all sorts off stuff into the DOM all the time, including when you build something using $('<p>some html</p>'). So if you went down that road you'd still effectively be placing stuff into the DOM then removing it again, temporarily, except that it'd be Jquery doing it.

thomasrutter
What does $('<p>some html</p>') do exactly?
Travis
It creates DOM elements out of the HTML you've given it and returns those elements in a Jquery object, which you can then insert into the document somewhere or do other things with. Jquery does this by using innerHTML and equivalents in order to take advantage of the browser's internal HTML parser.
thomasrutter
@Travis: as stated in the jQuery documentation (http://api.jquery.com/jQuery/#jQuery2), "...jQuery attempts to create new DOM elements as described by the HTML. Then a jQuery object is created and returned that refers to these elements..."
Fyodor Soikin
A: 

John Resig (jQuery author) created a pure JS HTML parser that you might find useful. An example from that page:

var dom = HTMLtoDOM("<p>Data: <input disabled>");
dom.getElementsByTagName("body").length == 1
dom.getElementsByTagName("p").length == 1

Buuuut... This question contains a constraint that I think you need to be more critical of. Rather than working around a hard-coded HTML string in a JS variable, can you not reconsider why it's that way in the first place? WHAT is that hard-coded string used for?

If it's just sitting there in the script, re-write it as a proper object.

If it's the response from an AJAX call, there is a perfectly good jQuery AJAX API already there. (Added: although jQuery just returns it as a string without any ability to parse it, so I guess you're back to square one there.)

detly
+1  A: 

First, it's a string:

var arbitrary = '<html><body>\nSomething<p>This</p>...</body></html>';

Now jQuery turns it into an unattached DOM fragment, applying its internal .clean() method to strip away things like the extra <html>, <body>, etc.

var $frag = $( arbitrary );

You can manipulate this with jQuery functions, even if it's still a fragment:

alert( $frag.filter('p').get() ); // says "<p>This</p>"

Or of course just get the text content as in your question:

alert( $frag.text() ); // includes "This" in my contrived example
                       // along with line breaks and other text, etc

You can also later attach the fragment to the DOM:

$('div#something_real').append( $frag );

Where possible, it's often a good strategy to do complicated manipulation on fragments while they're unattached, and then slip them into the "real" page when you're done.

Ken Redler