Javascript to grab Javascript comments within <head>

Question

I have a page that begins as follows:

<html>
        <head>
        <!-- 12036,2011-11-29/11:02 -->
        <title>Products & Services</title>

I would like to grab the 12036 number here and to display it within an absolutely positioned DIV at the bottom right of my screen. My intention here is to either to use it as a bookmarklet or as a Greasemonkey script.

The purpose of this is that the number represents a PAGE ID that we use reference internally.

I started off using:

var x = document.getElementsByTagName('head').innerHTML;

But I could not progress any further.

Can anyone assist here?

Are you able to change the way the page is served? That is, if you are able, can you change how this value is included in your document? Because you're sure making it hard for yourself right now. — Phil.Wheeler
– Phil.Wheeler, Commented Nov 29, 2011 at 4:10
No unfortunately. The head is part of a CMS template and reworking the order/syntax of the head would be quite involved. Considering that my request is for a want rather than a need, spending many man hours on this that won't fly in the eye of decision makers. — rlsaj
– rlsaj, Commented Nov 29, 2011 at 4:39

alex · Accepted Answer · 2011-11-29 04:29:03Z

6

This will work in latest browsers but you will need to modify it to suit older browsers...

var commentNode = [].slice.call(document.head.childNodes).filter(function(node) {
            return node.nodeType == 8;
          })[0],
    id = commentNode.data.match(/^\s*(\d+)/)[1];

To position it at the bottom corner of your screen...

var elem = document.createElement('div');

elem.id = 'id-display';

elem.appendChild(document.createTextNode(id));

document.body.appendChild(elem);

...and a touch of CSS...

#id-display {
    position: fixed;
    bottom: 0;
    right: 0;
    background: #333;
    color: #fff;
    padding: 6px;
}

JSBin.

edited Nov 29, 2011 at 4:29

answered Nov 29, 2011 at 4:22

alex

492k205 gold badges890 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Incognito Over a year ago

+1 Better answer than mine, you actually parse out the number and use sweet es5 stuff. ES5 shim should solve most legacy problems anyway so I wouldn't worry about that.

alex Over a year ago

@Incognito: Yeah, that and document.head not existing everywhere or position: fixed not working in older IEs. I figured this would be OK as it sounds like the OP wants this code to help with development.

rlsaj Over a year ago

Fantastic, thanks Alex and it was super easy for me to implement.

Andy E Over a year ago

+1, good stuff Alex :-) The compatibility implementation of filter() can be found on MDN.

Raynos Over a year ago

node.nodeType === Node.COMMENT_NODE and you can also use [].filter.call(head.childNodes, callback). And elem.appendChild(document.createTextNode(id)); should really be elem.textContent = id

Community · Accepted Answer · 2017-05-23 12:20:11Z

2

You want to select whatever element you're working with, lets call it var ele;

var div = document.getElementsByTagName('div')[0];

Then you want to grab an array of all the child nodes inside ele, so var nodes = div.childNodes;

Then you loop through them for their node type, which for comments is "8" as per the spec.

for (var i=0; i<nodes.length; i++){
    if (nodes[i].nodeType === 8) {
        //Only comments go out to console.
        console.log(nodes[i]);
    }1
}

Here's a demo for you.

Please note, you are NEVER TO EVER PARSE HTML WITH A REGULAR EXPRESSION.

edited May 23, 2017 at 12:20

CommunityBot

11 silver badge

answered Nov 29, 2011 at 4:26

Incognito

20.8k15 gold badges82 silver badges121 bronze badges

1 Comment

rlsaj Over a year ago

Thanks for the "Never Parse" warning Incognito!

James Montagne · Accepted Answer · 2011-11-29 04:15:36Z

1

getElementsByTagName returns an array of elements. You will need to grab the first element in that array before you can get innerHTML or anything else.

document.getElementsByTagName('head')[0].innerHTML

Instead of using innerHTML you may want to consider using .childNodes and the looping through to find comment nodes.

edited Nov 29, 2011 at 4:15

answered Nov 29, 2011 at 4:08

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

2 Comments

Incognito Over a year ago

That's only the entire string representation of the head tag, not simply comments.

James Montagne Over a year ago

Right, that's why I added the last bit about .childNodes. May have been editing while you commented.

Collectives™ on Stack Overflow

Javascript to grab Javascript comments within <head>

3 Answers 3

5 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related