Auto numbering your google docs headings / headlines

Google-docs-writer is great for collaborating, but it lacks of many features.
At least i created a small bookmarklet to add numbering to all headlines in your document.

The numbering is done in the style of:

1. headline
1.1. subheadline 1
1.2. subheadline 2
…

How to use / install

Just drag the link below to your bookmarks-bar, open your google document and press the “gDocs: headline numbering” button.
gDocs: headline numbering

Source

(function(){
 
var doc = window.frames['wys_frame'].document;
var elements = doc.getElementsByTagName('*');
var numbers = [0,0,0,0,0,0,0];
for (var i in elements) {
    var e = elements[i];
    if (!e || !e.tagName || !e.tagName.match(/^H([1-6])$/)) {
        continue;
    }
 
    var eLevel = RegExp.$1;
    var txt = '';
 
    numbers[eLevel]++;
    for (var l = 1; l<=6; l++) {
        if (l <= eLevel) {
            txt += numbers[l]+'.';
        } else {
            numbers[l] = 0;
        }
    }
 
    e.textContent = txt+' '+e.textContent.replace(/^[0-9\.\s]+/, '');
}
 
})();

Updates

  • because of changes in google-docs i modified how the document is accessed

Related posts:

  1. CSS Counter Test / Auto numbering your google docs headlines with CSS

Tags: ,

JavaScript Comments 7 Apr 3rd, 2009

7 Responses to “Auto numbering your google docs headings / headlines”

  1. Joe Says:
    June 27th, 2009 at 11:34

    This is excellent! Works a treat. An idea: another script to remove all the numbering would be great. Then you can write your content not worried, switch on numbering, switch it off again. etc.

  2. Joe Says:
    June 27th, 2009 at 11:45

    So I deleted some of the script to make another bookmark that removes the numbering:

    Right click bookmark bar.
    New bookmark.
    Name = “clear numbering” or something
    Copy text below and paste into “Location”:
    Click Add

    javascript:(function(){var doc = $.ownerDocument || $;var elements = doc.getElementsByTagName(‘*’);for (var i in elements) {var e = elements[i];if (!e || !e.tagName || !e.tagName.match(/^H([1-6])$/)) {continue;}e.textContent = e.textContent.replace(/^[0-9\.\s]+/, ”);}})();

  3. Daniel Prieler Says:
    July 1st, 2009 at 22:34

    Hey joe, thanks for your comments and your remove script :)
    Actually i’m not using this script anymore for google-docs, because css-generated numbers do the job as well. maybe i will write a little howto sometime for this :)

  4. Lars Clausen Says:
    July 20th, 2009 at 09:26

    Thank you for this nice little snippet of code, we have been using it for several weeks now, and it has worked beautifully – but today it suddenly doesn’t do anything. I think the last time it worked for sure was Wednesday. I couldn’t see anything obvious changed in the document HTML. This happens on Firefox 3.0.11 (and no, it didn’t get updated since last the numbering worked), Konqueror 4.1.2, Seamonkey 1.1.12 on Linux and on Safari and Firefox on Mac OS X.

  5. Daniel Prieler Says:
    July 20th, 2009 at 11:28

    hi lars,
    i just tested the numbering code. it turns out google made some small changes to access the editor content. i modified the script in my original post, so just “reinstall” the bookmarklet with the link above.

  6. Londan Says:
    May 3rd, 2010 at 10:48

    Thanks so much for this!! Totally awesome and just what I was looking for.

  7. Martin Says:
    June 28th, 2010 at 08:28

    Hi, i think it works not with the new version of google docs.

Leave a Reply