{"id":2784,"date":"2019-09-04T13:51:07","date_gmt":"2019-09-04T20:51:07","guid":{"rendered":"https:\/\/designersgate.com\/blogs\/?p=2784"},"modified":"2020-06-13T04:38:56","modified_gmt":"2020-06-13T04:38:56","slug":"title-capitalization-with-javascript","status":"publish","type":"post","link":"https:\/\/designersgate.com\/blog\/title-capitalization-with-javascript\/","title":{"rendered":"Title Capitalization with JavaScript"},"content":{"rendered":"\n

JavaScript<\/a>, JS, is an amazing scripting language and it’s been adopted by many platforms including Node.js<\/a>, which turns JS into a server side scripting language. You can even program a PDF form using Adobe\u00ae Acrobat JS API<\/a>. Very versatile and powerful scripting language.<\/p>\n\n\n\n

But, as any other scripting language, there some functionalities that you will miss from languages that you might be using today. In my case, PHP<\/a>.<\/p>\n\n\n\n

An example of the many functions I use a lot with PHP is the function ucwords()<\/code> which stands for Upper Case Words (Capitalize each word on a string provided).<\/p>\n\n\n\n

The ucwords()<\/code> function is used as follow:<\/p>\n\n\n\n

<?php echo ucwords('hello world'); ?><\/code><\/pre>\n\n\n\n
This will print:<\/p>\n\n\n\n
Hello World<\/pre>\n\n\n\n
With JavaScript, the only functions equivalent to this is String.prototype.toUpperCase()<\/a> and String.prototype.toLowerCase()<\/a>, but also has this very useful string function String.prototype.toLocaleUpperCase()<\/a> which will capitalize the entire string maintaining it’s locale language expressions.<\/p>\n\n\n\n
The problem with these functions is that they upper\/lower case the entire string, But if you want to do a title case version as PHP’s ucwords(),<\/code> you need to create your own String.prototype function. Many feel tempted to use Regular Expressions<\/a> for this, but that’s a totally over-kill process since it takes extra milliseconds for JS to process this.<\/p>\n\n\n\n
You can still use the string functions provided by JS to return the same results, but you need to combine other available functions to recreate it or even enhance this functionality.<\/p>\n\n\n\n
If you are a beginner interested in learning JavaScript step by step follow along this tutorial, if you already know what you are doing you can view the final code here<\/a>. Or at the end of this tutorial.<\/p>Rafael Vila<\/cite><\/blockquote>\n\n\n\n
String.prototype.split()<\/h2>\n\n\n\n
The String.prototype.split() function is your first step in order to create an array list for each word provided in a string statement. For this example I will create a variable called 'stringVar'<\/code> with the string value \"JavaScript title case function\"<\/code><\/em>.<\/p>\n\n\n\n
'use strict';\nvar stringVar = 'JavaScript title case function';<\/pre>\n\n\n\n
Open your favorite text editor and follow through with this tutorial. If you have never used JS before, this will help you get started. Save the file as 'titleCase.js'<\/code>, if you are on Windows, I recommend to use Visual Studio Code<\/a>, Brakets<\/a> or NotePad++<\/a> over Windows’ own NotePad<\/a>, believe me, makes things easier. But my top choice is Visual Studio Code.<\/p>\n\n\n\n
Since we need to capitalize each word stored on the stringVar<\/code> variable, we need to split it into an array using the split()<\/code> function like this:<\/p>\n\n\n\n
var stringArray = stringVar.split(' ');<\/pre>\n\n\n\n
As you can see, when splitting the string value, you need to specify String.prototype.split() to do the split using each blank space as reference, if you do not specify, the string will be split letter by letter, which is useful for other stuff, but not for what we are trying to do. You can specify to split by any character, just FYI.<\/p>\n\n\n\n
Now is where the fun part start, we need to ask JS to look each iteration on the new array we created… Wait what, what are you talking about? Yeah, I forgot to tell you, that’s why I called this new variable stringArray because is what it is, the split function turn the string stored on stringVar into an array that should look like this when sent to the console:<\/p>\n\n\n\n
console.log(stringArray);\n\/\/output\n[\"JavaScript\",\"title\",\"case\",\"function\"]<\/pre>\n\n\n\n
You won’t find an item with the blank spaces because that was the delimiter for the split. Since is an array, we can use a loop function<\/a> to accomplish our goal, in our case we are going to use the for<\/code> loop.<\/p>\n\n\n\n
The For Loop<\/h2>\n\n\n\n
for (i in stringArray) {\n    if (stringArray.hasOwnProperty(i)) {\n       ...\n    }\n}<\/pre>\n\n\n\n
The above code what it does is to assign the item key as a numeric value to a new declared variable i<\/code> which stands for item, you can call the variable whatever you like and what makes sense to you.<\/p>\n\n\n\n
Array.prototype.hasOwnProperty()<\/h2>\n\n\n\n
Inside the for loop you noticed I created an if statement that will only be executed if the key item is found on the array properties. One thing you need to be aware of is that objects in JS not only contain the items you are storing on them, but also will include properties that are used by JS to properly interact with the object. I will not going to explain this deep down into details, but you can test it on your browser’s developer mode console by entering:<\/p>\n\n\n\n
console.log(['hello','world']);<\/pre>\n\n\n\n
There are many ways you can accomplish our goal, but I prefer this one which is similar to another PHP function I use very often called foreach<\/code>, which I love by the way. I will declare a new variable called jointString<\/code> where we are going to stored each iteration of the stringArray<\/code> capitalized. For that I’m going to use another JS array function called Array.prototype.push()<\/a><\/code>.<\/p>\n\n\n\n
Array.prototype.push()<\/h2>\n\n\n\n
var jointString = [];\n\nfor (i in stringArray) {\n    if (stringArray.hasOwnProperty(i)) {\n       jointString.push(...);\n    }\n}<\/pre>\n\n\n\n
The push()<\/code> function is the equivalent to PHP’s array_push() but it is a lot cleaner to use, and what it those is to add an item to an existing array. Since our array is empty:<\/p>\n\n\n\n
var jointString = [];\n\/\/same as\n\/\/var jointString = new Array();<\/pre>\n\n\n\n
We are going to add an item by pushing it into jointString<\/code> array during our for<\/code> loop. But before we delve into that, let’s talk about what we are going to push in the array, and for that I’m going to introduce a new JS String function String.prototype.substring()<\/a><\/code>.<\/p>\n\n\n\n
String.prototype.substring()<\/h2>\n\n\n\n
The substring() function what it does is to select a portion from a given string and two parameters have to provide where to start and where to end. For example, let’s say I want to grab the first three letters of a string \"FooBar\"<\/code>:<\/p>\n\n\n\n
var foobar = \"FooBar\",\n    foo = foobar.substr(0,3),\n    bar = foobar.substr(3,6);\n\nconsole.log(foobar, foo, bar);\n\n\/\/Output\nFooBar\nFoo\nBar<\/pre>\n\n\n\n
As you can see, when dealing with scripting language you have to set your mind that counting starts on 0, not 1. \"FooBar\"<\/code> string has a length of 6, but it is counted as 0, 1, 2, 3, 4 and 5.<\/p>\n\n\n\n
In our first attempt we are telling substring()<\/code> to store partial part of the string “FooBar” from 0 to 3, which is telling from start to the third letter (0,1,2) (F,o,o) then store this new partial value into a new declared variable called foo<\/code>. <\/p>\n\n\n\n
Now, for the second attempt we are telling substring()<\/code> to start from the third letter forward, and since we know the length of our string we can be specific, we asked to continue until the sixth letter (3,4,5) (B,a,r), then store this partial value into a new declared variable called bar<\/code>.<\/p>\n\n\n\n
The last step is OK, if you know the length for the string given, but in the real world, we have words that has different length, and for this you need to think fluid. Let revisit the code in a more realistic scenario:<\/p>\n\n\n\n
var foobar = \"FooBar\",\n    foo = foobar.substr(0,3),\n    bar = foobar.substr(3,foobar.length);\n\nconsole.log(foobar, foo, bar);\n\n\/\/Output\nFooBar\nFoo\nBar<\/pre>\n\n\n\n
Above you noticed the code stayed almost the same with the exception on how we implement the bar<\/code> variable request. This time we were not specific but implement the execution of the String.prototype.length<\/a><\/code> property.<\/p>\n\n\n\n
String.prototype.length<\/h2>\n\n\n\n
The length() property works with either Array\/Objects or Strings, but they are implemented differently, in our case with are using the function for a string value. This function what it does is to return the numeric total of characters in a string. For our previous example the value is 6<\/strong>.<\/p>\n\n\n\n
Notice in this case the value is exactly what you expect it to be, since this in not counting steps as items in an array that start counting from 0<\/strong>. For length()<\/code> the zero value represent an empty string.<\/p>\n\n\n\n
Important Note: This property returns the number of code units in the string. UTF-16, the string format used by JavaScript, uses a single 16-bit code unit to represent the most common characters, but needs to use two code units for less commonly-used characters, so it’s possible for the value returned by length to not match the actual number of characters in the string.<\/p>MDN Web Docs<\/cite><\/blockquote>\n\n\n\n
Putting Stuff Together<\/h2>\n\n\n\n
Now let’s start putting things together:<\/p>\n\n\n\n
'use strict';\nvar stringVar = 'JavaScript title case function',\n    stringArray = stringVar.split(''),\n    jointString = [],\n    i,\n    tempString,\n    newString;\n\n\/\/capitalizing each word and pushing value into\n\/\/the jointString array\nfor (i in stringArray) {\n    if (stringArray.hasOwnProperty(i)) {\n       tempString = stringArray[i].substring(0,1)\n          .toLocaleUpperCase()\n          + stringArray[i]\n          .substring(1,stringArray[i].length);\n          jointString.push(tempString);\n    }\n}<\/pre>\n\n\n\n
Don’t panic, I will explain …<\/p>\n\n\n\n
Since I’m declaring at the very beginning of the code that I want this to be an strict code 'use strict';<\/code> I have to declare all variable I’m using, and I’m doing that right below the 'use strict';<\/code> statement.<\/p>\n\n\n\n
I added a couple of new variable which will be used inside the for loop statement: i<\/code>and tempString<\/code>. The later will hold the string to be pushed into the jointString<\/code> array.<\/p>\n\n\n\n
Inside the for loop statement is where things have the appearance of complication but it is not, let break it apart.<\/p>\n\n\n\n
First we declare the for loop as I explained before and make sure that it is using the properties we are requiring. Then we are requesting the single current item value as follow:<\/p>\n\n\n\n
stringArray[i]<\/pre>\n\n\n\n
As you noticed that we asked the for<\/code> loop to hold the key numeric value of each item in the variable i<\/code>, which we then using to specify which item we are requesting the value from, for example, stringVar<\/code> variable is storing a sentence with a total of 4 words, which are now stored as and array in the stringArray<\/code> variable, and this can be represented as follow [key: value]<\/code>, see below:<\/p>\n\n\n\n
[1: \"Javascript\", 2: \"title\", 3: \"case\", 4: \"function\"]<\/pre>\n\n\n\n
But remember that keys in an array starts at 0<\/strong>, same principle when specifying starting and end point to the substring()<\/code> function, and this is true in all computer languages that I know of:<\/p>\n\n\n\n
[0: \"Javascript\", 1: \"title\", 2: \"case\", 3: \"function\"]<\/pre>\n\n\n\n
When the loop statement interact with each item you need to specify which to get the value from by specifying the key, let’s say I want to the get the fourth word, to do that I need to request this value as follow:<\/p>\n\n\n\n
stringArray[3]\n\n\/\/example:\nconsole.log(stringArray[3]);\n\/\/output\nfunction<\/pre>\n\n\n\n
Understanding this principle let’s give tempString<\/code> variable a value:<\/p>\n\n\n\n
tempString = stringArray[3].substring(0,1).toLocaleUpperCase();\ntempString += stringArray[3].substring(1, stringArray[3].length);<\/pre>\n\n\n\n
We can make this more visually pleasing as follow, this is note necessary, but I will do it for the sake of this tutorial and easy step by step explanation:<\/p>\n\n\n\n
var itemValue = stringArray[3],\n    finalPosition = itemValue.length,\n    firstLetter = itemValue.substring(0,1),\n    restOf = itemValue.substring(1, finalPosition);\n\ntempString = firstLetter.toLocaleUpperCase() + restOf;<\/pre>\n\n\n\n
In the above code we assign each new variable declared a independent purpose which is easier to read than the two liner version, first we assign the value of an specific item into itemValue<\/code> variable.<\/p>\n\n\n\n
itemValue = stringArray[3];<\/pre>\n\n\n\n
Next we look for the final position (counting from 0 to end):<\/p>\n\n\n\n
finalPosition = itemValue.length;<\/pre>\n\n\n\n
After this, we requested the first letter of the string and assigned it to the firstLetter<\/code> variable:<\/p>\n\n\n\n
firstLetter = itemValue.substring(0,1);<\/pre>\n\n\n\n
Then we stored the rest of the string in restOf<\/code> variable starting from position 1 (second letter) to the last letter position stored in finalPosition<\/code> variable:<\/p>\n\n\n\n
restOf = itemValue.substring(1, finalPosition);<\/pre>\n\n\n\n
After this is done, then we can concatenate the final values and assigned it to the tempString<\/code> variable:<\/p>\n\n\n\n
tempString = firstLetter.toLocaleUpperCase() + restOf;<\/pre>\n\n\n\n
In JS, to concatenate string you simple use the +<\/code> sign same as Visual Basic, note that if the values are number the result will be the addition of both values.<\/p>\n\n\n\n
Finishing the Code<\/h2>\n\n\n\n
As I said, the previous steps are not necessary, but you can keep them and apply it to the code we are working on. But I will keep this simple, it looks confusing in these small boxes, but you get used to it as you get deeper into learning the code.<\/p>\n\n\n\n
'use strict';\nvar stringVar = 'JavaScript title case function',\n    stringArray = stringVar.split(''),\n    jointString = [],\n    i,\n    tempString,\n    newString;\n\n\/\/capitalizing each word and pushing value into\n\/\/the jointString array\nfor (i in stringArray) {\n    if (stringArray.hasOwnProperty(i)) {\n       tempString = stringArray[i].substring(0,1)\n          .toLocaleUpperCase()\n          + stringArray[i]\n          .substring(1,stringArray[i].length);\n          jointString.push(tempString);\n    }\n}\n\nnewString = (jointString.length > 0)\n? jointString.join(' ')\n: stringVar;\n\nconsole.log(stringVar, newString);<\/pre>\n\n\n\n
Now we are adding a new variable newString<\/code>, a new array property Array.prototype.length<\/a> and a new array function Array.prototype.join()<\/a> into the code. And also we are introducing a the if\/else<\/code> statement shorthand.<\/p>\n\n\n\n
Array.prototype.length<\/h2>\n\n\n\n
The Array.prototype.length is similar but is not the same as it’s string counterpart. In a string it returns the total value of characters in a string, while on an array it returns the total number of items in it.<\/p>\n\n\n\n
Array.prototype.join()<\/h2>\n\n\n\n
This function will concatenate all items in an array into a string. This does the opposite that String.prototype.split() does. The later turn a string into an array, while join()<\/code> turns an array into a string. As with the split() function, you need to specify what to implement between each item or separator string.<\/p>\n\n\n\n
newString = jointString.join(' ');\n\/\/sending to console\nconsole.log(newString);\n\/\/output\nJavaScript Title Case Function\n\nnewString = jointString.join('-');\nconsole.log(newString);\n\/\/output\nJavaScript-Title-Case-Function<\/pre>\n\n\n\n
In the example above I processed the array with two different separator strings.<\/p>\n\n\n\n
Since we added an if statement inside the loop, there’s might be a slight possibility that the array jointString<\/code> stays empty, and to avoid user’s frustration we need to prepare the code to return at least the original value. That is why we are using the if\/else<\/code> shorthand.<\/p>\n\n\n\n
If\/Else Shorthand<\/h2>\n\n\n\n
To process the final value we can do something like this:<\/p>\n\n\n\n
if (jointString.length > 0) {\n    ...\n} else {\n    ...\n}<\/pre>\n\n\n\n
Which is the traditional way to declare an if\/else statement. But if it is a basic statement, the shorthand come in handy:<\/p>\n\n\n\n
newString = (jointString.length > 0) ? ... : ... ;<\/pre>\n\n\n\n
This is basically the same thing but many scripting languages as PHP and many others offer this shorthand to help you keep your code clean and simple. Let see a comparison:<\/p>\n\n\n\n
if (jointString.length > 0) {\n    newString = jointString.join('');\n} else {\n    newstring = stringVar;\n}\n\n\/\/shorthand\nnewString = (jointString.length > 0)\n             ? jointString.join(' ')\n             : stringVar ;<\/pre>\n\n\n\n
The Final Code<\/h2>\n\n\n\n
'use strict';\nvar stringVar = 'JavaScript title case function',\n    stringArray = stringVar.split(''),\n    jointString = [],\n    i,\n    tempString,\n    newString;\n\n\/\/capitalizing each word and pushing value into\n\/\/the jointString array\nfor (i in stringArray) {\n    if (stringArray.hasOwnProperty(i)) {\n       tempString = stringArray[i].substring(0,1)\n          .toLocaleUpperCase()\n          + stringArray[i]\n          .substring(1,stringArray[i].length);\n          jointString.push(tempString);\n    }\n}\n\nnewString = (jointString.length > 0)\n? jointString.join(' ')\n: stringVar;\n\nconsole.log(stringVar, newString);<\/pre>\n\n\n\n
After this is done and run on the browser the output should be:<\/p>\n\n\n\n
JavaScript title case function\nJavaScript Title Case Function <\/pre>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
In this tutorial you have learn how to create a JavaScript file, declare variables, split variable string into array, processing the variable with a for loop statement, declaring different conditions with an if statement, verifying an item exists inside and array, joining an array into a string, using if\/else shorthand for a conditional outcome and a cleaner code…. uff. and that was fun.<\/p>\n\n\n\n
Hope you enjoyed this tutorial as I enjoyed creating it. If you want to learn how to implement this in your first function check below.<\/p>\n\n\n\n
Happy Coding, Happy Developing, see you next time.<\/p>\n\n\n\n
CodePen Final Code (Real World Implementation)<\/h2>\n\n\n\n
\n  See the Pen \n  Slug to Title Simplified<\/a> by Rafael (@raphievila<\/a>)\n  on CodePen<\/a>.<\/span>\n<\/p>\n