CODEWITHSUNDEEP
javascriptjquery
Vivek S
Vivek S

Reputation: 5540

Get the element by looking up its line number

I have an onerror event which captures the url & line number of the exception. Now I need to fetch the element's HTML from the line number. How do I look up the DOM and get the content on that particular line number?

Upvotes: 4

Views: 361

Answers (1)

Tim S
Tim S

Reputation: 2329

Rory's comment is almost right. It's not necessarily impossible, but getting something that works is going to be a total hack. Here's why:

When you get the HTML of your page with the document.documentElement.outerHTML, you start running into formatting problems because different browsers treat 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 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>

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 might get you the results you want, but I think it's really hacky; so I'm gong to recommend you don't do it, and I'm not going to pour a ton of effort into it:

  1. Duplicate your entire page, from the beginning HTML tag to the ending HTML tag in the last comment on the page like this:

    <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>
<!--
<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>
-->

  2. Get the contents of the last comment (this should help: Get text inside HTML comment tag?). When I tried the Fiddle in the accepted answer, it provided properly formatted whitespace in Chrome, Firefox, and IE.

  3. Split the result at newline ("\n")

  4. Look for your line number, and viola! There you go.

So, like I warned before. This "solution" bloats your HTML and is a total hack. But it's the only way I can think of that would have any chance of preserving the white space and letting you find the exact line number you want.

I hope this helps, and please do not credit me if you end up using the hack.

Upvotes: 4

Related Questions