Converting Case: Besides a Useful Tool, It Is Something Every Developer Should Know

First, Converting case is a tool that handles text, alternating between upper and lower case to form patterns known as format.

It is very common for people to draft a text without worrying about the words that should be capitalized, or that must be SCREAMING in your text, and then fixing it is a beautiful job, not to mention that it is boring, isn't it?

However, for a developer to know how to manipulate a string is essential, if not mandatory, especially if you are a beginner.

It is obviously a matter of evolution and use case until you understand each case and know when to do it, and what is the best way to do it for your goal.

Also check out: Fallen Lobo V2 Gamer Mouse - Video Review and Unboxing

Converting Case Preview

Here below I will leave a tool that encompasses all the cases that we will talk about in this post, you can feel free to test and if you want to access this text conversion tool too, here it is:

https://convertcase.marriedgames.com.br

Title Case (Perfect for titles)

The most common case for us here on the blog, we usually write an article for a long time, going back and forth, editing here and there, and in very few cases we remember to leave the correct words with the first capital letter and the words like: 'de ',' in ',' to 'lowercase in the middle of a sentence.

This is where the Title Case comes in, a really cool example, is the title of the article “Besides a Useful Tool is Something Every Developer Should Know”, when I wrote the title, it was like this “besides a useful tool is something that every developer should know ”, which is in the format of 'Lower Case'.

First of all, think about the job my friend ...

Now think of the tool doing this for us:

Converting Case Tool
Image of converting case in standard selection

First, it starts with a “famous Lorem Ipsum” in the text area and with the 'Sentence Case'selected.
On the other hand, to use it is simple, click on the 'Clear' button and paste your text there, that done, just select the “Case” you want and that's it!

It is at hand. Much easier right?

Now comes the part of the developers, how was this result achieved?
In this specific case I am using JavaScript to do the manipulation, but there are countless ways to achieve the result and basically in any language.

First we need to make sure that our text is all tiny so that we have consistency when it comes to handling.

let texto = 'site de notícias do mundo dos jogos e tecnologia';
let textoMinusculo = texto.toLowerCase();

The next step is to separate the words and transform them into an Array (or List if you prefer) so that you can manipulate them one by one. Who will do this job will be the function split Javascript.

let palavras = textoMinusculo.split(' ');

So we must iterate over our array of words to validate whether or not we should manipulate that word. Anyway, we took the first letter, using the charAt and we use the toUpperCase (explain further below), and immediately we use the slice to remove the first character, concatenating the result.

palavras = palavras.map(palavra => {
  if (palavra.length <= 2) return palavra; // Estamos ignorando palavras que tem 2 ou menos caracteres para que fiquem minusculas
  return palavra.charAt(0).toUpperCase() + palavra.slice(1);
});

And we’re almost done, now we need to merge the words again with the method join.

let textoTitulo = palavras.join(" ");

So that's it, do we have our Title Case ready? Or almost?

There is a case that I did not mention here, I want to leave this challenge to you, tell me in the comments at the end of the article what is in the repository code (which is at the end of the article) that was missing here.

Anyway, below I am putting the Sandbox of the code that I mentioned in full and working to make it clearer to understand and also this repository where you have the complete and most optimized snippet.

Sentente Case

Every sentence starts with the first capital letter, right? If you forget, or get a text in “Upper case”Is when the Sentence Case comes in handy, and the implementation is much simpler.

At first, remember that in the previous item we used chartAt and slice? Anyway, it will be the same, see how simple:

texto = texto.toLowerCase(); // Primeiro como de costume, normalizamos o texto que recebemos.
texto = texto.charAt(0).toUpperCase() + texto.slice(1);

In the same way as before, below is the Sandbox with the complete code and also the Sentence Case repository.

Lower case

O lower case it is one of the simplest ones, he is responsible for leaving all the text minuscule, so I don’t think it’s worth going into too much detail here, if you want, you can leave in the comments your question that I will answer there blz? The/

texto = texto.toLowerCase();

So from now on all functions will be present in this repository Converting Case.

Upper case

O UPPER CASE it's not that different, here all the words are CAPITALIZED.

texto = texto.toUpperCase();

Capitalized Case

In some cases you will want to use Capitalized Case to get more attention in a text. In this case, we have a situation almost identical to that Title Case but this one we will not have the if that removes pronouns for example.

palavras = palavras.map(palavra => {
  return palavra.charAt(0).toUpperCase() + palavra.slice(1);
});

Alternating Case

Suddenly you want to make reading difficult for someone, the aLtErNaTiNg CaSe What are you looking for.
Its implementation is also simple and resembles some of the previous cases.

First we do the split, but from this view it will not be with the space being our separator character, but “nothing”, just an empty string, because we want to get character by character to change separately.

texto.split('');

Now we have our character array, to switch between yes and no, we can use Module Division to be able to switch between the characters, making one capital and one lower.

caracteres.map(function(char, index) {
  return index % 2 === 1 ? char.toUpperCase() : char.toLowerCase();
});

Likewise, we just need to merge our text again and that's it!

caracteres.join('');

Inverse Case

On the other hand, the InVeRsE cAsE it is the other way around, and the implementation is the same as in the item above, all we need to do is change the 1 to 0 in our ternary module operator.

caracteres.map(function(char, index) {
  return index % 2 === 0 ? char.toUpperCase() : char.toLowerCase();
});

How easy was the Alternating Case? Look at the result below and the complete code here.

Reverse Case

How about making pluzzles (puzzles) writing backwards? That's where the esreveR, I will let you undo this on your own hehehe.

In the meantime, in this case the implementation changes a little, but with Javascript (and with most languages ​​that have array functions) it changes even too easy, you can see:
First we break the string into an array of characters, nothing new so far.

texto.split('')

Soon after we use an array function, which completely inverts the sequence of the array we have:

caracteres.reverse()

Anyway, we add our string:

caracteres.join('')

Seriously, this was the most challenging right? hehehehe
So be sure to check out the full repository of converting case functions of this article and feel free to contribute more ideas or ways to manipulate text, not only with JavaScript, but also in other languages.

In conclusion, do you have any suggestions for development content that you would like to see? Leave it there in the comments that we will bring to you!

Share
Avatar of juanxcursed

Businessman, 29, Married Games founder, developer, gamer, enthusiast and a complete NERD, Juan still likes to pick up his guitar and get a good sound at Rocksmith.

Leave a Comment

Your email address will not be published. Required fields are marked with *

This site uses cookies, as explained in our Privacy Policy. By continuing to browse, you agree to the conditions.
This site uses cookies, as explained in our Privacy Policy. By continuing to browse, you agree to the conditions.