Getting unparsed (raw) HTML with JavaScript

by

You cannot get the actual HTML source of part of your web page.

When you give a web browser an HTML page, it parses the HTML into some DOM nodes that are the definitive version of your document as far as the browser is concerned. The DOM keeps the significant information from the HTML—like that you used the Unicode character U+00A0 Non-Breaking Space before the word fix—but not the irrelevent information that you used it by means of an entity reference rather than just typing it raw ( ).

When you ask the browser for an element node’s innerHTML, it doesn’t give you the original HTML source that was parsed to produce that node, because it no longer has that information. Instead, it generates new HTML from the data stored in the DOM. The browser decides on how to format that HTML serialisation; different browsers produce different HTML, and chances are it won’t be the same way you formatted it originally.

In particular,

  • element names may be upper- or lower-cased;

  • attributes may not be in the same order as you stated them in the HTML;

  • attribute quoting may not be the same as in your source. IE often generates unquoted attributes that aren’t even valid HTML; all you can be sure of is that the innerHTML generated will be safe to use in the same browser by writing it to another element’s innerHTML;

  • it may not use entity references for anything but characters that would otherwise be impossible to include directly in text content: ampersands, less-thans and attribute-value-quotes. Instead of returning   it may simply give you the raw   character.

You may not be able to see that that’s a non-breaking space, but it still is one and if you insert that HTML into another element it will act as one. You shouldn’t need to rely anywhere on a non-breaking space character being entity-escaped to  … if you do, for some reason, you can get that by doing:

x= el.innerHTML.replace(/\xA0/g, ' ')

but that’s only escaping U+00A0 and not any of the other thousands of possible Unicode characters, so it’s a bit questionable.

If you really really need to get your page’s actual source HTML, you can make an XMLHttpRequest to your own URL (location.href) and get the full, unparsed HTML source in the responseText. There is almost never a good reason to do this.

More Related Contents:

  1. Stop form refreshing page on submit
  2. Convert Data URI to File then append to FormData
  3. Full-screen iframe with a height of 100%
  4. How to call multiple JavaScript functions in onclick event?
  5. JavaScript: How to find out if the user browser is Chrome?
  6. Adding input elements dynamically to form
  7. Encode HTML entities in JavaScript
  8. How do I remove a file from the FileList
  9. getCurrentPosition() and watchPosition() are deprecated on insecure origins
  10. Cross-origin data in HTML5 canvas
  11. HTML form action and onsubmit issues
  12. How to detect when a page exits fullscreen?
  13. TypeError: p.easing[this.easing] is not a function
  14. JavaScript – head, body or jQuery?
  15. Wrap link around
  16. contentDocument for an iframe
  17. make checkbox behave like radio buttons with javascript
  18. Change iframe src by clicking a link
  19. How to generate a thumbnail image after adding an image inside an input type=”file” in a form and submitting them both on the same form
  20. Proper way to reset a GIF animation with display:none on Chrome
  21. Disable button whenever a text field is empty dynamically
  22. Javascript Marquee to replace tags
  23. Dynamically change the size of the font size based on text length
  24. How do I capture a key press (or keydown) event on a div element?
  25. Passing JSON data from php to html-data attribute and then to Javascript
  26. Firefox Web Console Disabled?
  27. Is it possible to make input fields read-only through CSS?
  28. Freeze Header until Irrelevant (HTML, CSS and JS)
  29. How can I fix Highcharts error #13?
  30. Decode HTML entity in Angular JS

Leave a Comment