How to do Initial Caps With Javascript/jQuery

Question

I have a Dynamic Breadcrumb set up with JavaScript. All I want is to do Initial Caps for each word.

Example: Home > Some > Page

Currently I have them all converted to lowercase and have removed all - from the strings in pages that have multiple words. I just need to convert the string to Initial Caps. Here is my code that I have working so far:

var path = "",
    href = document.location.href,
    domain =  href.match(/:\/\/(.[^/]+)/)[1],
    replacedomain = 'http://' + domain + '/',
    s = href.replace(/-/gi, " ").split("/"),
    lastElement = document.location.href.split('/').splice(-1,1);



for (var i = 2; i < (s.length - 1); i++) {
    path += "<a class='bc' href=\"" + href.substring(0, href.indexOf("/" + s[i]) + s[i].length + 1) + "/\">" + s[i] + "</a> >  ";

    if (i > 0) { 
       breadcrumb = path;  
    }
}


i = s.length - 1;
breadcrumb += "<span>" + s[i] + "</span>";


var breadcrumbl = breadcrumb.toLowerCase(),
    domain =  breadcrumbl.match(/:\/\/(.[^/]+)/)[1],
    breadcrumb2 = breadcrumbl.replace(domain, "").replace(domain, ""),
    breadcrumbs = breadcrumb2,
    url = '<a href="/">Home</a>' + breadcrumbs;

document.getElementById('breadcrumb1').innerHTML=url;

I think the solution is with a regular expression but I'm not good at writing them and I'm having a hard time with the concept. Also if anyone thinks this script can be optimized further your feedback is welcome. I'll will make variable names more semantic for production.

score 21 · Accepted Answer · answered Apr 10 '12 at 18:55

21

You could use css:

span.breadcrump {
    text-transform: capitalize;
}

answered Apr 10 '12 at 18:55

Esailija

138,174
23
272
326

Kevin B · Answer 2 · 2012-04-10T19:15:23.013

I recently wrote this helper method to do this for me:

function autocase ( text ) {
    return text.replace(/(&)?([a-z])([a-z]{2,})(;)?/ig,function ( all, prefix, letter, word, suffix ) {
        if (prefix && suffix) {
            return all;
        }

        return letter.toUpperCase() + word.toLowerCase();
    });
}

It takes into account things such as ™

Edit: To use this method, simply pass it a string, and it will return the string auto cased. It does not work on html strings.

//...
document.getElementById('breadcrumb1').innerHTML=url;
function autocase ( text ) {
    return text.replace(/(&)?([a-z])([a-z]{2,})(;)?/ig,function ( all, prefix, letter, word, suffix ) {
        if (prefix && suffix) {
            return all;
        }

        return letter.toUpperCase() + word.toLowerCase();
    });
}
$("#breadcrumb1 a").text(function(i,text){
    return autoCase(text);
});

score 4 · Answer 3 · answered Apr 10 '12 at 18:55

4

Try using css property text-transform:capitalize; for the breadcrumb.

Mostlikely in you case it should be,

.breadcrumb1 a {
   text-transform: capitalize;
}

answered Apr 10 '12 at 18:55

Selvakumar Arumugam

79,297
15
120
134

I only want the first letter capitalized not the entire word. Initial Caps – ddilsaver Apr 10 '12 at 18:59
@ddilsaver that's exactly what the answer does. `capitalize` capitalizes words. `uppercase` converts all letters to uppercase. – KP. Apr 10 '12 at 19:02
My mistake I was thinking of **text-transform: uppercase** your correct – ddilsaver Apr 10 '12 at 19:03
1

Keep in mind that `text-transformation` doesn't really change the value casing (to upper or whatever case), it's only for visual representation, so if you need to submit that value to the server, it will be on its original form. I would do what Kevin B did. – MilkyWayJoe Apr 10 '12 at 19:17

score 3 · Answer 4 · edited May 23 '17 at 12:17

3

My first thought is:

breadcrumb += "<span>" + s[i].substring(0,1).toUpperCase() + s[i].substring(1) + "</span>";

But @Esailija's answer is much easier. Reference:

toUpperCase().

edited May 23 '17 at 12:17

Community

1
1

answered Apr 10 '12 at 18:55

David Thomas

249,100
51
377
410

I upvoted this one because I needed a JS solution, not css. I want to capitalize words that have at least 3 characters, but shorter words are probably abbreviations and need to be all-caps. I don't think there is a simpler solution for this in CSS. – Dovev Hefetz Apr 07 '16 at 09:03

score 3 · Answer 5 · answered Apr 10 '12 at 18:55

3

not to be a punk but why not just use css?

text-transform: capitalize;

answered Apr 10 '12 at 18:55

samccone

10,746
7
43
50

I only want the first letter capitalized not the entire word. Initial Caps – ddilsaver Apr 10 '12 at 18:59
@ddilsaver that's exactly what the answer does. `capitalize` capitalizes words. `uppercase` converts all letters to uppercase. – KP. Apr 10 '12 at 19:02
My mistake I was thinking of text-transform: uppercase your correct – ddilsaver Apr 10 '12 at 19:04

score 3 · Answer 6 · answered Apr 10 '12 at 18:55

3

Sorry if you really need JS but in CSS you can easily use text-transform:Capitalize;

answered Apr 10 '12 at 18:55

benoît

1,473
3
13
31

score 2 · Answer 7 · answered Jan 22 '20 at 01:56

2

Since the accepted answer didn't actually answer the question as it was asked, I figured this might help; it's a solution using Regex with JavaScript, originally found here: Regex capitalize first letter every word

Here's the snippet I found useful:

var re = /(\b[a-z](?!\s))/g;
var s = "fort collins, croton-on-hudson, harper's ferry, coeur d'alene, o'fallon"; 
s = s.replace(re, function(x){return x.toUpperCase();});
console.log(s); // "Fort Collins, Croton-On-Hudson, Harper's Ferry, Coeur D'Alene, O'Fallon"

answered Jan 22 '20 at 01:56

Dustin Malone

342
2
8

May want to add s = s.toLowerCase() somewhere before the replace, just to make sure the rest of it is indeed lowercase. Well.. if you're dealing with randomly cased input. But overall I like this solution. Css does not actually change anything. – blissweb Aug 03 '20 at 10:58

score 0 · Answer 8 · answered Oct 01 '15 at 16:32

0

Here's one:

s.replace(/(^[a-zA-Z]{1})/,function (s){
  return s.toUpperCase();
});

answered Oct 01 '15 at 16:32

RevelationX

161
1
8

How to do Initial Caps With Javascript/jQuery

8 Answers8