Most efficient way to turn all caps into title case with JS or JQuery? [duplicate]

Question

I have a string that is in ALL caps originally and I want it to be title case:

THIS IS MY STRING WHY AM I YELLLING?

And I want it to be:

This Is My String Why Am I Yelling?

I can't use css text-transform:capitalize when the letters are in CAPS initially. So I know I have to use JS. I tried this, which works but I'm not sure it's very efficient:

 $('.location').each(function () {

    var upper = $(this).html();
    var lower = upper.toLowerCase();
    $(this).replaceWith(lower); 

});

And now that my letters are actually lowercase, I use CSS text-transform:capitalize.

Is there a more efficient way to do this? (I'm already using jQuery on the site, so that's why I've used it above.)

Thanks!

Answer 1

You could match consecutive word characters, and use a replacer function to replace with the first character (as-is), followed by the rest with toLowerCase() called on them:

const text = 'THIS IS MY STRING WHY AM I YELLLING?';
const output = text.replace(
  /(\w)(\w*)/g,
  (_, firstChar, rest) => firstChar + rest.toLowerCase()
);
console.log(output);

Answer 2

const s = 'THIS IS MY STRING, from WaShInGtOn D.C. WHY AM I YELLLING?'
const result = s.replace(/([a-z])([a-z]*)/gi, (_, p1, p2) => 
  p1.toUpperCase() + p2.toLowerCase()
)
console.log(result)

Use simple regex and capture groups in String.replace. When capturing, you can access the groups as described here on MDN.

I don't know if this is the most efficient, but it is pretty simple (ie easy for future devs to grok).

Answer 3

Another possible solution could be using the regular expression /./g in String.replace() and check on the replacement function if the previous character, of the current matched one, is a letter and the offset of this one is not zero, to decide whether to replace the character by the lower-case or upper-case version.

let str = "THIS IS MY STRING WHY AM I YELLLING. WASHINGTON D.C?";

let out = str.replace(/./g, (m, offset, str) =>
{
    return (offset !== 0 && /\w/.test(str[offset-1])) ? m.toLowerCase() : m.toUpperCase();
});

console.log(out);

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

Answer 4

This is a solution split by space and handle each array item.

var str = 'THIS IS MY STRING WHY AM I YELLLING?';
var arr = str.split(' ');
var result = arr.map(c=> c.charAt(0) + c.toLowerCase().slice(1));
str = result.join(' ')
console.log(str)

var str = 'THIS IS MY STRING WHY AM I YELLLING?';
var arr = str.split(' ');
var result = arr.map(c=> c.charAt(0) + c.toLowerCase().slice(1));
str = result.join(' ')
console.log(str)