5

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?

rlsaj
  • 735
  • 1
  • 12
  • 37
  • 3
    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 Nov 29 '11 at 04:10
  • 1
    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 Nov 29 '11 at 04:39

3 Answers3

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.

alex
  • 479,566
  • 201
  • 878
  • 984
  • 1
    +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. – Incognito Nov 29 '11 at 04:33
  • @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. – alex Nov 29 '11 at 04:37
  • Fantastic, thanks Alex and it was super easy for me to implement. – rlsaj Nov 29 '11 at 04:54
  • 1
    +1, good stuff Alex :-) The compatibility implementation of `filter()` [can be found on MDN](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/filter). – Andy E Nov 29 '11 at 08:27
  • `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` – Raynos Nov 29 '11 at 13:28
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.

Community
  • 1
  • 1
Incognito
  • 20,537
  • 15
  • 80
  • 120
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.

James Montagne
  • 77,516
  • 14
  • 110
  • 130