如何将第一个字母大写，其余小写？

Question

1) 我正在尝试应用第一个字母为大写，其他字母为小写。如果用户在输入中写入，它应该会自动转换。例子：

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

“iSAAC guilherme aRAÚJO”到“Isaac Guilherme Araújo”

2) 在巴西有带有连接词的名字。 示例：“das”“da”“dos”“do”“de”“e”。

卡洛斯·爱德华多·胡里奥 dos 桑托斯

卡洛斯·爱德华多 dos 桑托斯 e 席尔瓦

卡洛斯·爱德华多 da 席尔瓦

3) 我在使用名称字段时遇到了这个问题。使用以下代码，我可以应用大写的第一个字母，但其他小写字母我不能。然后，根据问题2，如果我写：

输入的值：“douglas de Oliveira júnior”

应该是：“Douglas de Oliveira Júnior”

不应该：“douglas de Oliveira Jú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">

我是 Stackoverflow 的新成员，我为错误道歉，我正在学习 javascript。谢谢！

Answer 1

为简单起见，我使用了 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 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

此解决方案还修复了大写的连接词，例如carlos DE silva。
试试下面的 sn-p :)

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 4

SimpleJ 的答案是正确的，但要澄清您的原始方法：“问题”在 contains 函数中 - 它实际上根据它的名称执行它应该做的事情，如果 str 包含 search，则返回 true，所以contains('douglas', 'do') === true;您已经将字符串拆分为单独的单词，因此只需使用 split[i] !== "de" && split[i] !== "do" 而不是 contains 调用。

Answer 5

我已经在 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 6

我发现了一些显然令人满意的东西。当用户将光标放在输入的中间时，它甚至可以工作。我在这里找到了它： 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">