How to put the first letter capitalized and the rest lowercase?

Question

1) I'm trying to apply the first letter in uppercase and the other as lowercase. If the user write in the input, it should automatically transform. Examples:

"isaac guilherme araújo" to "Isaac Guilherme Araújo"

"iSAAC guILHErme aRAÚJO" to "Isaac Guilherme Araújo"

2) In Brazil there are names with connectives. Examples: "das" "da" "dos" "do" "de" "e".

Carlos Eduardo Julio dos Santos

Carlos Eduardo dos Santos e Silva

Carlos Eduardo da Silva

3) I am having this problem to work with the name fields. With the following code, i could apply the first letter in uppercase, but the others as lowercase i couldn't. Then, according to problem number 2, if I write:

value entered: "douglas de oliveira júnior"

should be: "Douglas de Oliveira Júnior"

shouldn't: "douglas de Oliveira Júnior". //value shown with current code

function contains(str, search){
 if(str.indexOf(search) >= 0){
   return true;
 } else {
   return false;
 }
}

$.fn.capitalize = function(str) {
    $.each(this, function() {
        var split = this.value.split(' ');
        for (var i = 0, len = split.length; i < len; i++) {
            var verify = (split[len - 1] == "D" || split[len - 1] == "d") && (str == "e" || str == "E") || (str == "o" || str == "O");
            if (verify == false) {
                if ( contains(split[i], 'de') == false && contains(split[i], 'do') == false) {
                    split[i] = split[i].charAt(0).toUpperCase() + split[i].slice(1);
                }
            }
        }
        this.value = split.join(' ');
    });
    return this;
};

$(".capitalize").keypress(function(e) {
    var str = String.fromCharCode(e.which);
    $(this).capitalize(str);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Nome: </label>
<input type="text" id="nome" name="nome" class="form-control input-sm capitalize">

I'm a new member here on Stackoverflow and I apologize for the mistakes, I am learning javascript. Thank you!

Answer 1

You could use a format function that capitalizes all words except those provided in a whitelist. Then format the input value whenever the user presses a key (doesn't work well if the user moves the input cursor around though):

function format(string, noCapList=[]) {
  const words = string.toLowerCase().split(' ');
  return words.map((word) => {
    if(!word.length || noCapList.includes(word)) {
      return word;
    } else {
      return word[0].toUpperCase() + word.slice(1);
    }
  }).join(' ');
}

const input = document.querySelector('input');
input.addEventListener('keyup', () => {
  input.value = format(input.value, ["das", "da", "dos", "do", "de", "e"]);
});

<input/>

It looks like the issue with your code is in how you're formatting the input. I'm not 100% sure I understood the question, but this format function provides the output you were looking for.

Answer 2

This solution also fixes connectives in uppercase, such as carlos DE silva.
Try it with the snippet below :)

var connectives = {
    das: true,
    da: true,
    dos: true,
    do: true,
    de: true,
    e: true
};

function capitalize(str) {
    return str
        .split(" ")
        .map(function(word) {
            return !connectives[word.toLowerCase()]
                ? word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
                : word.toLowerCase();
        })
        .join(" ");
};

$(".capitalize").keyup(function() {
    var cursorStart = this.selectionStart;
    var cursorEnd = this.selectionEnd;
    var capitalizedString = capitalize($(this).val());

    $(this).val(capitalizedString);
    this.setSelectionRange(cursorStart, cursorEnd);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Nome: </label>
<input type="text" id="nome" name="nome" class="form-control input-sm capitalize">

Answer 3

for simplicity I used npm lodash

https://lodash.com/docs/4.17.11#capitalize

    const _ = require('lodash');
    const connectives = {
               das: true,
               da: true,
               dos: true,
               do: true,
               de: true,
               e: true
                     };


    const nameToCapitalize = str.split(' ').map(word => connectives[word] ? 
    word.toLowercase : _.capitalize(word)).join(' ');

Answer 4

SimpleJ's answer is right, but to clarify your original approach: the "problem" is in the contains function - it actually does what it should according to it's name and returns true if the str contains search, so contains('douglas', 'do') === true; you already have the string split into separate words so just use split[i] !== "de" && split[i] !== "do" instead of the contains calls.

Answer 5

I have posted algorithm in FCC about title casing a sentence . Might it would help you!

 function titleCase(str) {
     //First Converted to lowercase in case of test cases are tricky ones
      var spl=str.toLowerCase();

      //Then  Splitted in one word format as leaving one space as ' '
      spl = spl.split(' ');

      for(var i=0;i<spl.length;i++){

        //Again Splitting done to split one letter from that respective word   
        var spl2= spl[i].split('');  

        // In specific word's letter looping has to be done in order to 
        // convert 0th index character to uppercase
        for(var j=0;j<spl2.length;j++){

        spl2[0]= spl2[0].toUpperCase();
        }
        // Then Joined Those letters to form into word again
        spl[i] = spl2.join('');   
      }
      // Then joined those words to form string
      str = spl.join(' ');
      return str;
    }

titleCase("sHoRt AnD sToUt");

Answer 6

I found something that apparently was satisfactory. It even works when the user places the cursor in the middle of the input. I found it here: Link - Stackoverflow

Can anyone here evaluate and tell me if have some problem with this code from the user Doglas?

function ucfirst (str) {
    //  discuss at: http://locutus.io/php/ucfirst/
    str += '';
    var f = str.charAt(0).toUpperCase();
    return f + str.substr(1);
}

var not_capitalize = ['de', 'da', 'do', 'das', 'dos', 'e'];
$.fn.maskOwnName = function(pos) {
    $(this).keypress(function(e){
        if(e.altKey || e.ctrlKey)
            return;
        var new_char = String.fromCharCode(e.which).toLowerCase();
        
        if(/[a-zà-ú\.\, ]/.test(new_char) || e.keyCode == 8){
            var start = this.selectionStart, end = this.selectionEnd;
        
        if(e.keyCode == 8){
            if(start == end)
                start--;

            new_char = '';
        }
        
        var new_value = [this.value.slice(0, start), new_char, this.value.slice(end)].join('');
        var maxlength = this.getAttribute('maxlength');
        var words = new_value.split(' ');
        start += new_char.length;
        end = start;

        if(maxlength === null || new_value.length <= maxlength)
            e.preventDefault();
        else
            return;

        for (var i = 0; i < words.length; i++){
            words[i] = words[i].toLowerCase();

            if(not_capitalize.indexOf(words[i]) == -1)
                words[i] = ucfirst(words[i]);
        }

        this.value = words.join(' ');
        this.setSelectionRange(start, end);
    }
});

$.fn.maskLowerName = function(pos) {
  $(this).css('text-transform', 'lowercase').bind('blur change', function(){
      this.value = this.value.toLowerCase();
  });
};

$.fn.maskUpperName = function(pos) {
  $(this).css('text-transform', 'uppercase').bind('blur change', function(){
      this.value = this.value.toUpperCase();
  });
};

};

$('.capitalize').maskOwnName();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Nome: </label>
<input type="text" id="nome" name="nome" class="form-control input-sm capitalize">