Rory's comment is almost right. This is not necessarily impossible, but getting something that works will be a complete hack. That's why:
When you get the HTML page of your page with document.documentElement.outerHTML, you start to work with formatting problems because different browsers handle white space differently. Consider the following page:
<html> <head> <title>Test Get HTML by Line Number</title> <script type="text/javascript"> window.onload = function() { var lines = document.documentElement.outerHTML; console.log(lines); }; </script> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet venenatis metus. Sed lobortis semper nisl, eget mollis nisl rutrum sed. Duis iaculis pharetra eros, eget imperdiet felis aliquet non. Aliquam non viverra eros, vitae malesuada lacus. Sed ligula sapien, volutpat id diam ac, bibendum imperdiet lacus. Proin turpis lorem, blandit nec pretium in, lobortis eu erat. Cras ultrices sapien nec quam luctus, nec dictum ante semper.</p> </body> </html>
In Chrome and Firefox, the result in the Javascript Console is as follows:
<html><head> <title>Test Get HTML by Line Number</title> <script type="text/javascript"> window.onload = function() { var lines = document.documentElement.outerHTML; console.log(lines); }; </script> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet venenatis metus. Sed lobortis semper nisl, eget mollis nisl rutrum sed. Duis iaculis pharetra eros, eget imperdiet felis aliquet non. Aliquam non viverra eros, vitae malesuada lacus. Sed ligula sapien, volutpat id diam ac, bibendum imperdiet lacus. Proin turpis lorem, blandit nec pretium in, lobortis eu erat. Cras ultrices sapien nec quam luctus, nec dictum ante semper.</p> </body></html>
But in IE it looks like this:
<HTML><HEAD><TITLE>Test Get HTML by Line Number</TITLE> <SCRIPT type=text/javascript> window.onload = function() { var lines = document.documentElement.outerHTML; console.log(lines); }; </SCRIPT> </HEAD> <BODY> <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet venenatis metus. Sed lobortis semper nisl, eget mollis nisl rutrum sed. Duis iaculis pharetra eros, eget imperdiet felis aliquet non. Aliquam non viverra eros, vitae malesuada lacus. Sed ligula sapien, volutpat id diam ac, bibendum imperdiet lacus. Proin turpis lorem, blandit nec pretium in, lobortis eu erat. Cras ultrices sapien nec quam luctus, nec dictum ante semper.</P></BODY></HTML>
I can think of something that can give you the results you want, but I think it is really hacky ; so I recommend that you not do this, and Iām not going to pour a lot of effort into it:
Duplicate your entire page, from the HTML tag to the end of the HTML tag, in the last comment on the page:
<html> <head> <title>Test Get HTML by Line Number</title> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet venenatis metus. Sed lobortis semper nisl, eget mollis nisl rutrum sed. Duis iaculis pharetra eros, eget imperdiet felis aliquet non. Aliquam non viverra eros, vitae malesuada lacus. Sed ligula sapien, volutpat id diam ac, bibendum imperdiet lacus. Proin turpis lorem, blandit nec pretium in, lobortis eu erat. Cras ultrices sapien nec quam luctus, nec dictum ante semper.</p> </body> </html>
Get the contents of the last comment (this should help: Get the text inside the HTML comment tag? ). When I tried Fiddle in the accepted answer, it provided correctly formatted spaces in Chrome, Firefox and IE.
Divide the result on a new line ("\ n")
Look for your line number and viola! There you go.
So, as I already warned. This "solution" inflates your HTML and is a complete hack. But this is the only way I can think that this will have a chance to save the empty space and allow you to find the exact line number you want.
I hope this helps, and please do not credit me if you finish using the hack.