Contents of an H3 as the H3's ID

Question

I need to get the contents of an <h3></h3> and then lowercase the contents and remove the spaces (replacing them with - or _) and then inject them into the ID of the <h3>.

So, for example...

<li class="widget-first-list"><h3>About This Stuff</h3></li>
<li class="widget-first-list"><h3 id="about-this-stuff">About This Stuff</h3>

This should exist for a load of h3s on the page, so it needs to include '$this' somewhere.

Hope this makes sense - I am okay with jQuery but this has been causing me a few problems.

What have you tried? It seems to be quite straightforward. What exactly are you having problems with? There are plenty of hints here. E.g. [How to get an the text value of an element in jQuery?](http://stackoverflow.com/questions/3339131/how-to-get-an-the-text-value-of-an-element-in-jquery), [Convert JavaScript String to be all lower case?](http://stackoverflow.com/questions/154862/convert-javascript-string-to-be-all-lower-case), [Replace all spaces in a string with '+'](http://stackoverflow.com/questions/3794919/replace-all-spaces-in-a-string-with). — Felix Kling, Jul 23 '12 at 13:26
What if 2 H3's having same content ? You want the same ID for both ? thatis not Valid HTML — Shyju, Jul 23 '12 at 13:28
And of course [Changing an element's ID with jQuery](http://stackoverflow.com/q/347798/218196). — Felix Kling, Jul 23 '12 at 13:32

score 8 · Accepted Answer · answered Jul 23 '12 at 13:27

8

Since you specified jQuery, here you go:

$("h3").each(function() {
    var me = $(this);
    me.attr("id",me.text().toLowerCase().replace(/[^a-z0-9-]/g,'-').replace(/--+/g,'-'));
});

This replaces all non-alphanumeric characters with -, and then strips out multiple consecutive - characters.

In plain JS (much more efficient):

(function() {
    var tags = document.getElementsByTagName("h3"), l = tags.length, i;
    for( i=0; i<l; i++) {
        tags[i].id = tags[i].firstChild.nodeValue.toLowerCase().replace(/[^a-z0-9-]/g,'-').replace(/--+/g,'-');
    }
})();

Even better, checking for duplicates:

(function() {
    var tags = document.getElementsByTagName("h3"), l = tags.length, i, newid, n;
    for( i=0; i<l; i++) {
        newid = tags[i].firstChild.nodeValue.toLowerCase().replace(/[^a-z0-9-]/g,'-').replace(/--+/g,'-');
        if( document.getElementById(newid)) {
            n = 1;
            do {n++;}
            while(document.getElementById(newid+'-'+n));
            newid += '-'+n;
        }
        tags[i].id = newid;
    }
})();

answered Jul 23 '12 at 13:27

Niet the Dark Absol

320,036
81
464
592

@Christoph Yes, but it's less obvious and unnecessary since the NodeList isn't having elements removed from it. – Niet the Dark Absol Jul 23 '12 at 13:35
This is perfect, thanks plus something I didn't find on StackOverflow so hopefully it'll be of benefit to others. – John the Painter Jul 23 '12 at 13:46
@Christoph Erm, the length is rechecked every single time the loop iterates, so caching it can be very time-saving. – Niet the Dark Absol Jul 23 '12 at 13:50
@Kolink true, if you have several million headings;) – Christoph Jul 23 '12 at 13:52
@Christoph It's kind of hypocritical to advocate plain JavaScript as being more efficient than jQuery, and then use inefficient practices :P – Niet the Dark Absol Jul 23 '12 at 13:54
This argument might favor my version `for(i=l;i--)` then :-p – Christoph Jul 23 '12 at 14:00
Nevertheless +1 because I really like your double-pronged solution. – Christoph Jul 23 '12 at 14:03

score 1 · Answer 2 · answered Jul 23 '12 at 13:30

1

A solution:

$("h3").each(function() {

    var content = $(this).html().replace(/ /g,'_').toLowerCase();
    $(this).attr("id",content);

});

answered Jul 23 '12 at 13:30

Steeven

4,057
8
38
68

"A solution", yes, but a bad one. What if the header contains whitespace other than just a space character? What if multiple headers have the same text content when converted in this way? – Niet the Dark Absol Jul 23 '12 at 13:39

Contents of an H3 as the H3's ID

2 Answers2