Transform ALL CAPS to Proper Case using CSS and jQuery

Question

I'm trying to do something similar to this thread https://stackoverflow.com/a/3471258/2117845 and I think I want something like Harmen posted with the jquery code and said it's now a plugin?

What I have is ALL CAPS titles coming from a database. For example:

THE QUICK BROWN FOX IS ABOUT TO JUMP OVER THE FENCE

I want to look like:

The Quick Brown Fox is About to Jump Over the Fence

So is there a way to do this with CSS and jQuery to transform the text and eliminate certain words from being made into Proper Case? But I guess I'd need to keep the first instance. Like if I eliminated "the, is, to, and" then the first "the" in the title would be all lowercase. So would I be able to somehow eliminate those common words only if it's not the first word?

I know that's a lot but I'm not super familiar with jQuery. Is there a tutorial or plugin anywhere that shows how to do something like this. I've seen many questions about how to transform ALL CAPS text so a solution would probably be quite useful.

this should help, but doesn't take care of `is, to, the` in lower case http://stackoverflow.com/questions/196972/convert-string-to-title-case-with-javascript — Matt Busche, Feb 28 '13 at 02:40
You'd have to reference some library of words or parts of speech to pull this off with any accuracy. I'd look for a better solution. — isherwood, Feb 28 '13 at 02:54
@MattBusche that post does help somewhat but I was hoping there was a jQuery solution to transform say for example all links in an unordered list. Based on the post you mentioned I also found this on GitHub - https://github.com/gouch/to-title-case. But still I was hoping to find a jquery solution. I'm not knowledgeable enough to use that javascript and convert it to jquery. I'm sure there's a way though. — Carolyn, Feb 28 '13 at 03:05
If the information is coming from the database, using a server side language to do the transformation would be faster/more efficient than jQuery. PHP has a function called `ucwords` that does almost what you want, but it wouldn't be too hard to make a similar function in any other language. http://www.php.net/manual/en/function.ucwords.php#84920 — cimmanon, Feb 28 '13 at 03:15

score 5 · Accepted Answer · edited May 23 '17 at 11:58

5

I modified the code from Greg Dean's answer in a related question.

I would call this algorithm an educated guess at best since it's not actually evaluating English capitalization rules. You'll probably need to add more words to the noCaps list for better accuracy.

Example

JS

var ele = $('p'); 
ele.text(toProperCase(ele.text())); 

function toProperCase(str)
{
    var noCaps = ['of','a','the','and','an','am','or','nor','but','is','if','then', 
'else','when','at','from','by','on','off','for','in','out','to','into','with'];
    return str.replace(/\w\S*/g, function(txt, offset){
        if(offset != 0 && noCaps.indexOf(txt.toLowerCase()) != -1){
            return txt.toLowerCase();    
        }
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
}

HTML

<p>THE QUICK BROWN FOX IS ABOUT TO JUMP OVER THE FENCE</p>

edited May 23 '17 at 11:58

Community

1
1

answered Feb 28 '13 at 03:24

Brandon Boone

16,281
4
73
100

I'm having a problem with this...I have my list of titles in a
– Carolyn Mar 01 '13 at 00:45
YES! that is it. Thank you so much! I knew there had to be a .each added in there somewhere but I just wasn't sure how to do it. Thanks for your help! – Carolyn Mar 01 '13 at 18:50
I ran into one more thing I need to add to the javascript. Anytime an mdash occurs there are usually no spaces before or after the mdash so the word after the mdash should be capitalized but it's currently lowercase. Could you show me where to add in a line so that after an mdash that first letter after is a Cap? I think it probably goes in the if then statement but I don't know exactly how to put it in there. – Carolyn Mar 06 '13 at 23:54
Sounds like a separate question. I don't have time to take a look at the moment, but if you create a new question, referencing this one, you'll get a lot more exposure and input from other users. Thanks! – Brandon Boone Mar 07 '13 at 12:43

score 0 · Answer 2 · answered Feb 28 '13 at 03:16

I have just modified the code by Harmen to fit your needs. put it inside your JS file.

jQuery.fn.ucwords = function() {
   return this.each(function(){
      var val = $(this).text().toLowerCase(), newVal = '';
      val = val.split(' ');

      for(var c=0; c < val.length; c++) {
         if (c>0 && val[c]=="is" || c>0 && val[c]=="to" || c>0 && val[c]=="the"){
             newVal+=val[c]+' ';
         } else newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length) + (c+1==val.length ? '' : ' ');

      }
      $(this).text(newVal);
  });
}

$(document).ready(function(e) {
    $('p.link').ucwords();
});

HTML for the example

<p class="link">THE QUICK BROWN FOX IS ABOUT TO JUMP OVER THE FENCE</p>

and JSFiddle for you http://jsfiddle.net/fqEvX/

Thanks so much for your help Omer. It works great. I think I may use Brandon Boone's code though, the list of words seems a little easier to maintain and add to. Thanks for helping! — Carolyn, Feb 28 '13 at 04:39

Transform ALL CAPS to Proper Case using CSS and jQuery

2 Answers2

Example

Linked

Related