How to transfer the first letter, and the rest in lower case? [Js]

Question

1) I am trying to apply the first letter in upper case and as lower case . If the user writes in the input, it should be automatically converted. Examples:

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

"ISAAC guILHErme aRAÚJO" in "Isaac Guillerme Araujo"

2) In Brazil, there are names with links. 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 a problem with name fields. With the following code, I could apply the first letter in upper case, but the rest as lowercase letters I could not. Then, according to problem number 2, if I write:

: make uglas de oliveira júnior "

should be: "Douglas de Oliveira Junior"

should not: “Douglas de Oliveira Junior.” // 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 am a new member here on Stackoverflow and I apologize for the errors; I am learning javascript. Thanks!

Answer 1

This solution also fixes the upper case ligaments, for example carlos DE silva .
Try this 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 2

You can use the format function, which will head all words except those that are listed in the white list. Then format the input value whenever the user presses a key (does not work if the user moves the input cursor around):

 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 seems like the problem with your code is how you format the input. I am not 100% sure that I understood the question, but this format function provides the output you were looking for.

Answer 3

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

Answer 4

I published an algorithm in the FCC about the sentence title case. Perhaps this will 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 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 5

I found something that was apparently satisfactory. It works even when the user places the cursor in the middle of the input. I found it here: fooobar.com/questions/111287 / ...

Can anyone here rate and tell me if you have some problems with this code from a Doglas user?

 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">