如何把第一個字母大寫，其餘小寫？ [JS]

Question

1）我試圖申請大寫的第一個字母和其他小寫。如果用戶在輸入中寫入，它應該自動轉換。例子：

「艾薩克·吉列爾梅阿勞霍」 到 「以撒的Guilherme阿勞霍」

「艾薩克·吉列爾梅·阿勞霍」 到 「以撒的Guilherme阿勞霍」

2）在巴西有與聯結的名字。 例如：「das」「da」「dos」「do」「de」「e」。

卡洛斯·愛德華多·胡里奧DOS桑托斯

卡洛斯·愛德華多·DOS桑托斯Ë席爾瓦

卡洛斯·愛德華多·達席爾瓦

3）我有這個問題使用名稱字段。用下面的代碼，我可以將第一個字母用大寫字母，但其他字母用小寫字母不能。然後，根據問題的編號爲2，如果我寫：

值中輸入： 「做于格拉德奧利維拉小輩」

應該是： 「道格拉斯·奧利維拉小輩」

不該't：「douglas de OliveiraJúnior」。與當前的代碼所示

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

我在這裏＃2的新成員，我的失誤道歉//值，我學習JavaScript。謝謝！

Answer 1

此解決方案還修復了大寫的連接詞，如carlos DE silva。
與片段試試下面:)

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

您可以使用格式化函數，該函數會將除白名單中提供的單詞之外的所有單詞進行大寫處理。每當用戶按下一個鍵然後格式化輸入值（不能很好地工作，如果用戶雖然四處移動輸入光標）：

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

它看起來像問題與您的代碼是在如何格式化輸入。我不是100％確定我明白了這個問題，但是這個格式函數提供了你正在尋找的輸出。

Answer 3

SimpleJ的答案是正確的，但要弄清楚你的原來的做法：「問題」是在contains功能 - 它實際上應該根據什麼來它的名字，如果str包含search，所以contains('douglas', 'do') === true返回true;您已將字符串拆分爲單獨的單詞，因此只需使用split[i] !== "de" && split[i] !== "do"而不是contains調用。

Answer 4

我已經在FCC公佈的算法大約標題套管的句子。可能會幫助你！

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 5

我發現了一些顯然令人滿意的東西。它甚至在用戶將光標置於輸入中間時起作用。我在這裏找到它： Link - Stackoverflow

任何人都可以在這裏評估並告訴我，如果用戶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">