Get HTML Snapshot of Current Page with Javascript

get_html_snapshot_jquery.js

/* Note: The html string returned fron this method will not contain any actual remotely referenced JS/CSS just the HTML as in the source */

window.get_html_snapshot = function(hideItems, hideClasses){
  hideItems = hideItems || false; 
  hideClasses = hideClasses || ".modal, .modal-backdrop";
  
  var input_types_to_skip = ["button", "submit", "file", "image", "password"];

  // First write all input[type=text] field value so they can be seen when HTML is loaded
  $('input').each(function(){
    var type =  $(this).prop('type');

    if(type == 'checkbox'){
      var is_checked = $(this).is(":checked");
      $(this).attr("checked", is_checked);
    }else if(input_types_to_skip.indexOf(type) == -1){
      var val = $(this).val();
      $(this).attr("value", val);
    }
  });

  if(!hideItems){
    /* Get html string (un-manipulated) */
    return $('html').get(0).outerHTML;
    
  }else{
    /* 
      Get copy of document that can be manipulated without affected actual DOM
      The reason we need to manipulate DOM is because we need to remove/hide the report a bug modal amongst other things
    */
    var $sanitized_document_element = $("html").clone();

    /* Remove/Hide Unwanted Elements */
    $sanitized_document_element.hide(hideClasses);

    /* Get html string */
    var sanitized_html = $sanitized_document_element.get(0).outerHTML;

    return sanitized_html;
  }
};

get_html_snapshot_vanilla.js

/* Note: The html string returned fron this method will not contain any actual remotely referenced JS/CSS just the HTML as in the source */

window.get_html_snapshot = function(hideItems, hideClasses){
  hideItems = hideItems || false;
  hideClasses = hideClasses || ".modal, .modal-backdrop";
  
  var input_types_to_skip = ["button", "submit", "file", "image", "password"];

  // First write all input[type=text] field value so they can be seen when HTML is loaded
  document.querySelectorAll('input').forEach(function(item, i){
    if(item.type == 'checkbox'){
      var is_checked = item.checked;
      item.setAttribute('checked', is_checked);
    }else if(input_types_to_skip.indexOf(item.type) == -1){
      var val = item.value;
      item.setAttribute('value', val);
    }
  });

  if(!hideItems){
    /* Get html string (un-manipulated) */
    return docment.documentElement.outerHTML;
    
  }else{
    /* 
      Get copy of document that can be manipulated without affected actual DOM
      The reason we need to manipulate DOM is because we need to remove/hide the report a bug modal amongst other things
    */
    var sanitized_document_element = document.documentElement.cloneNode(true);
    /* OR */
    // var dom_parser = new DOMParser();
    // var sanitized_document_element = dom_parser.parseFromString(document.documentElement.outerHTML, "text/html");

    /* Remove/Hide Unwanted Elements */
    sanitized_document_element.querySelectorAll(hideClasses).forEach(function(item, i){
      item.style.display = 'none';
    });

    /* Get html string */
    var sanitized_html = sanitized_document_element.outerHTML;

    return sanitized_html;
  }
};