Store Entire HTML page into jQuery Variable

I have an app that uses HTML Email templates. I want to write a script that parses through the HTML of an email template and modifies the code. This is easy when the template is loaded on the page, but I want to do these dynamically where the HTML is just a value from a <textarea> (or more specifically CodeMirror).

The value of the <textarea> (CodeMirror) would look like this:

<!doctype html>
<html>
  <head>...HEAD HTML...</head>
  <body>...BODY HTML...</body>
</html>

I've tried:

// This part works great. Stores the HTML as a varaible. 
var template_html = codeMirrorInstance.getValue(); 

// This shows the proper HTML in console as text
console.log(template_html);

// From here I can't access the HTML though
console.log($(template_html).find('body'));

But I keep getting undefined. Nothing I try is working... any ideas?

Solution

It appears you can do what you are trying to do. You just have to create a new document and possibly an second instance of jQuery.

You should take a look at this: https://stackoverflow.com/a/15496537/1819684 and this: https://stackoverflow.com/a/15479402/1819684

$(function() {
  var doctype = document.implementation.createDocumentType( 'html', '', '');
  var dom = document.implementation.createDocument('', 'html', doctype);
  
  var jq2 = jQuery(dom);
  var txt = $('textarea').val();
  
  console.log(jq2.find('html').html(txt).find('body'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>
<html>
  <head>...HEAD HTML...</head>
  <body>...BODY HTML...</body>
</html>
</textarea>