Three Ways to Title Case a Sentence in JavaScript
Sonya Moisset

What I did was using `string.replace()` with a RegExp and a callback function. Maybe a good introduction to RegExp is needed. I learnt it when I learnt to use Vim, and I seriously recommend every camper to learn it.

The function signature used here is

string.replace(RegExp, callback)

RegExp is a JavaScript object representing a regular expression. Regular expression is a language for describing text patterns. It was first used in another scripting language called Perl, famous for its text manipulation capabilities.

The regular expression used above is

/(^[a-z]| [a-z)/g

It consists of two parts:

  • Enclosed within two “/”’s is the pattern
  • Immediately following the above part are flags.

Here the flag “g”, expanding to “global”, means “matching all occurrences”. Within “replace()” it means “replace all occurrences”. This is probably the flag I use most often.

Now to break the pattern down, first take it out:

(^[a-z]| [a-z])

From left to right, their explanations:

  • Enclosed inside “()” is a match, or an extracted match. If you want to get the matched content you need to enclose the whole pattern as I do. Enclose part of the pattern to get only part of the content.
  • “^” represents the beginning of a line
  • Enclosed inside “[]” is an option group. It represents any single character enclosed.
  • “a” is a literal lowercase letter “a”. Same for “z”.
  • “-” represents a range inside “[]”. “[a-z]” thus means “any single lowercase letter”. Also often used ranges are “[0–9]” and “[A-Z]”.
  • “|” splits two alternatives. Here they are “^[a-z]” and “ [a-z]”. Alternatives before and after “|” is bound by a group, or to the ends of the whole pattern. The group can be a match “()”, or a non-matching group “(?:)”, like (?:alt1|alt2).
  • “ ” is a literal blank space. It can often be overlooked.

In the end, the pattern translated to English is “two characters where the first is the beginning of a line or a space, and the second is a lowercase letter”.

Since line beginning and space both “toUpperCase()” to themselves, I didn’t bother matching more precisely to “lowercase letters after either beginning of a line or a space”. While writing this article I went to actually do that, and the result is

(?:^([a-z])| ([a-z]))

Breaking this one down is left to readers as a little practice. (Because I am lazy and this article is already too long to be called “brief”.)

To draft regular expressions I use “regular expressions 101”, an editor which automatically breaks down the expression for you.

Although I talked about more precisely matching only the letters, because I used “match” in the callback, the whole pattern is matched regardless how I used “()”. I didn’t think so until I experimented with “console.log()”.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.