3

I would need to transform text to html jquery object, so that I had an access to the values specified in the and the following example.

var htmlContent = '<!doctype><html><head><title>Lorem Ipsum</title>Other code</head><body><div id="content"><h1>Custom code</h1><h2>Highlight2</h2></div></body></html>';

I want to modify so that I could work with HTML content in jquery follows

htmlContent.find('head title').text();

to h1 and h2 know approaches, probably because they are not vnotrene tags in <div id="content"></div>

Currently I have the following code:

var htmlContent = $(htmlContent);

But it does not work properly.

Thank you for counseling.

user3061527
  • 49
  • 1
  • 8
  • can easily done using PHP Simple HTML DOM Parser http://simplehtmldom.sourceforge.net/ – srinath madusanka Nov 21 '14 at 09:07
  • $('title') will grab the title tag.... – Jamie Barker Nov 21 '14 at 09:10
  • looks like an XY problem. why would you need to store an entire page's html in a jQuery object unless its the page you are working on? please tell us what you are trying to do, maybe there is an easier way to achieve what you need. – Banana Nov 21 '14 at 09:13

4 Answers4

2

I would propose next:

var htmlContent = '<!doctype><html><head><title>Lorem Ipsum</title>Other code</head><body>Custom code</body></html>';

// use temporary iframe
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.contentDocument.write(htmlContent);

// get <title> content; next should work in IE8 too
var titleText = iframe.contentDocument.querySelector('head title').innerHTML;
console.log(titleText);

// remove temporary iframe element
document.body.removeChild(iframe);

Note: I've changed .textContent to .innerHTML for IE8 support.

Alternative way, using jQuery:

var iframe = $('<iframe>').appendTo('body');
iframe[0].contentDocument.write(htmlContent);
var titleText = $('head title', iframe[0].contentDocument).text();
console.log(titleText);
iframe.remove();
Rost
  • 3,602
  • 2
  • 21
  • 21
  • it works for the tag title, but if I edit it so that I want info on the body tag so it no longer working. – user3061527 Nov 21 '14 at 10:26
  • It's strage... I tried next code in FF and Chrome and it works: `$('body', iframe[0].contentDocument).text();` (well, actually you should remove `Other code` from ``, it should not be there) – Rost Nov 21 '14 at 10:48
  • This is the entire contents of the html page, which is obtained by using `$.ajax` function. And when I have `$('body',iframe[0] .contentDocument).text();` return empty string (Google Chrome) – user3061527 Nov 21 '14 at 10:54
  • Could you create some pastebin or codepen to show the problem? Or just debug your AJAX response content - is everything ok with that HTML? – Rost Nov 21 '14 at 10:56
  • My ajax code: `var $jOk = jQuery.noConflict(); $jOk.ajax({ url: url, dataType: 'html', async: true, success: function (text, status, request) { var iframe = $jOk(' – user3061527 Nov 21 '14 at 11:56
  • Thanks for the info. Could you provide full HTML example? (in PasteBin, I guess) – Rost Nov 21 '14 at 12:03
  • Here is a basic html where use in my code. I modified the file path. [link]{http://pastebin.com/1abHWHPw} – user3061527 Nov 21 '14 at 12:32
  • Still strange :) I tested your example HTML, it appends to iframe and `.text()` returns non empty string. You should carefully debug your code. Set necessary breakpoints, check what is the AJAX response inside AJAX callback, step line by line and check where it goes wrong – Rost Nov 21 '14 at 15:14
  • One thing that may cause problem (and solution): http://stackoverflow.com/questions/4614850/jquery-add-iframe-with-content – Rost Nov 21 '14 at 15:18
1

Your code seem ok, this is the way how to create new elements in jQuery, eg.:

var $a = $('<div id="main"><p><strong>hello</strong><p></div>');

$a.find('p strong').text();

-> "hello"

I think the problem is with the html/head tags instead, jQuery ignores them, but I guess you don't need the whole html block anyway:

$('<html><head><div></head></html>');

-> [<div>​</div>​]

If you are parsing a string that contains a complete html I'd recommend using jQuery.parseHTML(), or if you need the body node too, you can use documentFragments or iframe, in this case there's no problem with <html> nodes.

var htmltext = "<html><div><p>test</p></div></hmtl>"
$('<div>').append($.parseHTML(htmltext)).find('p').text()

-> "test"

References:

Andras P
  • 51
  • 7
0

$(htmlContent) will give you following

Object[title, <TextNode textContent="Other codeCustom code">]

Now you can use $(htmlContent)[0].text to get title value

Banana
  • 7,424
  • 3
  • 22
  • 43
mahip_j
  • 368
  • 2
  • 11
0

Try This way.

$(htmlContent).filter('title').text()
$(htmlContent).filter('head').text()
Banana
  • 7,424
  • 3
  • 22
  • 43
Abhijeet
  • 1,515
  • 1
  • 11
  • 21
  • I want to notice that this way is a bit unpredicted and dangerous. Title (surprisely) works correct, but `$(htmlContent).filter('head').text()` returns wrong value. And you can't get the `` content, only ``. You shouldn't trust this approach – Rost Nov 21 '14 at 09:32
  • No offence, I'm just not sure that this solution is stable and cross-browser – Rost Nov 21 '14 at 09:49
  • Unfortunately, it returns me an empty string. it does not work as I need (use browser Chrome) – user3061527 Nov 21 '14 at 10:04