jQuery: Make strings with varying capitalization Title case

Question

Pretty simple question, but I can't quite seem to find the answer.

I have several HTML pages from differing sources that have strings in their <h2> elements with dumb capitalizations. Such as:

<h2>Are there OTHER USES for this medicine?</h2>

I'm looking to make these regular sentence case, i.e.,

<h2>Are there other uses for this medicine?</h2>

I began by making them all lower case with CSS:

h2 {
  text-transform: lowercase;
}

because I was hoping to then manipulate them with jQuery by making a function that just capitalizes the first letter.

So the question is: How would I write a jQuery function to capitalize just the first letter of each h2 element on a page?

After reading this thread, tried this:

function capitaliseFirstLetter(string){
  return string.charAt(0).toUpperCase() + string.slice(1);
}

$('h2').each(function(){
  capitaliseFirstLetter($(this).text());
});

But it didn't work, and the console didn't give me any errors, so I don't know what's wrong.

EDIT

I made one large oversight in this question. Using

text-transform: lowercase

made the word I lowercase, so

<h2>What should I do in case of OVERDOSE?</h2>

became

<h2>What should i do in case of overdose?</h2>

when I used @marcelo-biffara's solution. (Or the :first-letter CSS syntax.)

Now, do I need to use a complicated regexp to just capitalize the string " i "?

EDIT 2

If there are two occurrences of " i " (such as in "What should i do if i take too many doses?"), do I need a loop to replace them with " I "?

score 3 · Answer 1 · answered Dec 06 '12 at 19:21

capitaliseFirstLetter($(this).text()); returns you a string. That's it. You're not doing anything with that string. You need to put the returned string somewhere.

$('h2').each(function(){
    var str = capitaliseFirstLetter($(this).text());
    $(this).text(str);  // Set the text of the element
});

Marcelo Biffara · Accepted Answer · 2012-12-06T21:15:21.447

3

you can make this function

function capitalizeMe(val){
    return val.charAt(0).toUpperCase()+val.substr(1).toLowerCase();
}

oh, and maybe you need to remove you css h2 rule

you can apply it to your h2 like this

$('h2').each(function(){
    var str = capitalizeMe($(this).html());
    $(this).html(str);  
});


function replaceAll( text, v1, v2 ){
  while (text.toString().indexOf(v1) != -1)
      text = text.toString().replace(v1,v2);
  return text;
}

if you want to capitalize each instance of "i" you could do something like this

$('h2').each(function(){
    var str = replaceAll(capitalizeMe($(this).html())," i "," I ");
    $(this).html(str);  
});

edited Dec 06 '12 at 21:15

answered Dec 06 '12 at 19:34

Marcelo Biffara

811
4
8

This is great, but it only works if there's one instance of " i " in a sentence. Does it need a loop if it's something like "What should i do if i forget to take a dose?" Add that to your edit, and I'll mark it correct. – nickcoxdotme Dec 06 '12 at 21:10
ok, try now , you have to write a custom replaceAll function as shown! – Marcelo Biffara Dec 06 '12 at 21:15
this solution will fail if the string begins with an "i" and is not already capitalized. Nonetheless, this works for situation stated by OP. – Fr0zenFyr Jun 06 '16 at 05:34

score 2 · Answer 3 · answered Dec 06 '12 at 19:27

2

Couldn't you just use CSS

h2 {
    text-transform: lowercase;
}
h2:first-letter {
    text-transform: capitalize;
}

http://jsfiddle.net/mowglisanu/CbDHH/

answered Dec 06 '12 at 19:27

Musa

96,336
17
118
137

Forgot to mention I need to support IE8, which doesn't support that pseudo-selector. But that is a great idea! – nickcoxdotme Dec 06 '12 at 20:37
@nickcoxdotme from the doc above its supported from IE5.5, though I guess there is a lot to consider if you're going to use `:first-letter` – Musa Dec 06 '12 at 20:47
Oh, I didn't see that worked with the one colon syntax. That's a great solution, and see my edit. – nickcoxdotme Dec 06 '12 at 20:52

score 1 · Answer 4 · answered Dec 06 '12 at 19:21

1

You need to save the new value of the h2 content:

$('h2').each(function(){
  $(this).text(capitaliseFirstLetter($(this).text()));
});

answered Dec 06 '12 at 19:21

koopajah

23,792
9
78
104

score 1 · Answer 5 · answered Mar 31 '18 at 06:54

1

you cant do anything you just add following css

 h2{
       text-transform: lowercase;
    }

h2 {
    text-transform: lowercase;
}

<h2>My Name is xYz</h2>

answered Mar 31 '18 at 06:54

pk_tan777

351
1
3

jQuery: Make strings with varying capitalization Title case

5 Answers5