如何将首字母大写,其余为小写?

时间:2017-09-08 18:01:07

标签: javascript jquery

1)我正在尝试将首字母大写其他小写。如果用户在输入中写入,则应自动转换。例子:

  

“isaacguilhermearaújo”改编自“IsaacGuilhermeAraújo”

     

“iSAACguILHErmeaRAÚJO”致“IsaacGuilhermeAraújo”

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

  

Carlos Eduardo Julio dos Santos

     

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

     

Carlos Eduardo da 席尔瓦

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

  

输入的值:“执行 uglas de oliveirajúnior”

     

应该是:“Douglas deOliveiraJúnior”

     

不应该:“douglas deOliveiraJú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。谢谢!

6 个答案:

答案 0 :(得分: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%确定我理解了这个问题,但是这个格式函数提供了你正在寻找的输出。

答案 1 :(得分:2)

此解决方案还以大写形式修复了连接词,例如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">

答案 2 :(得分:0)

SimpleJ的答案是正确的,但澄清你的原始方法:“问题”在contains函数中 - 它实际上根据它的名称做它应该做的事情并且如果str包含它则返回true searchcontains('douglas', 'do') === true;您已将字符串拆分为单独的字词,因此只需使用split[i] !== "de" && split[i] !== "do"代替contains来电。

答案 3 :(得分:0)

我在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");

答案 4 :(得分:0)

我发现了一些显然令人满意的东西。当用户将光标放在输入的中间时,它甚至可以工作。我在这里找到了: Link - Stackoverflow

这里的任何人都可以评估并告诉我,如果用户Doglas的代码有问题吗?

&#13;
&#13;
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();
&#13;
<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">
&#13;
&#13;
&#13;

答案 5 :(得分:0)

为简单起见,我使用了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(' ');