web-dev-qa-db-ja.com

文字列内の各単語の最初の文字を大文字にする-JavaScript

この機能の何が問題になっていますか？助けてくれてありがとう。

function titleCase(str) {
 var splitStr = str.toLowerCase().split(' ');
 for (var i = 0; i < splitStr.length; i++) {
   if (splitStr.length[i] < splitStr.length) {
     splitStr[i].charAt(0).toUpperCase();     
   }
      str = splitStr.join(' '); 
 }
return str;
}

titleCase("I'm a little tea pot");
javascriptstringcapitalizecharat
39
slurrr

変更をアレイに再度割り当てることはないため、すべての努力が無駄になります。これを試して：

function titleCase(str) {
   var splitStr = str.toLowerCase().split(' ');
   for (var i = 0; i < splitStr.length; i++) {
       // You do not need to check if i is larger than splitStr length, as your for does that for you
       // Assign it back to the array
       splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);     
   }
   // Directly return the joined string
   return splitStr.join(' '); 
}

document.write(titleCase("I'm a little tea pot"));
81
somethinghere

あなたは複雑なものを非常に簡単なものにしています。これをCSSに追加できます。

 .capitalize {
    text-transform: capitalize;   
  }

JavaScriptでは、クラスを要素に追加できます

 document.getElementById("element").className="capitalize";
39
Marcos Pérez Gude

ES6バージョン：

const toTitleCase = (phrase) => {
  return phrase
    .toLowerCase()
    .split(' ')
    .map(Word => Word.charAt(0).toUpperCase() + Word.slice(1))
    .join(' ');
};

let result = toTitleCase('maRy hAd a lIttLe LaMb');
console.log(result);
25
Steve Brush

サードパーティのライブラリを使用できる場合、lodashにはヘルパー関数があります。

https://lodash.com/docs/4.17.3#startCase

_.startCase('foo bar');
// => 'Foo Bar'

_.startCase('--foo-bar--');
// => 'Foo Bar'
 
_.startCase('fooBar');
// => 'Foo Bar'
 
_.startCase('__FOO_BAR__');
// => 'FOO BAR'
<script src="https://cdn.jsdelivr.net/lodash/4.17.3/lodash.min.js"></script>
15
waqas

eS6では、矢印関数を使用した1行の回答

const captialize = words => words.split(' ').map( w =>  w.substring(0,1).toUpperCase()+ w.substring(1)).join(' ')
10
anshuman singh

ES2015バージョン：

const titleCase = title => title
    .split(/ /g).map(Word => 
        `${Word.substring(0,1).toUpperCase()}${Word.substring(1)}`)
    .join("");
5
Arthur Clemens

???????????????????????????? ???????????????????????????????? ???????????? ????????????????????-??? ???????????????????????????????????????????

単に正規表現関数を使用して、各文字の大文字化を変更できます。 V8 JIST最適化により、これは高速でメモリ効率が良いことが証明されるはずです。

// Only works on Latin-I strings
'tHe VeRy LOOong StRINg'.replace(/\b[a-z]|['_][a-z]|\B[A-Z]/g, function(x){return x[0]==="'"||x[0]==="_"?x:String.fromCharCode(x.charCodeAt(0)^32)})

または、機能として：

// Only works for Latin-I strings
var fromCharCode = String.fromCharCode;
var firstLetterOfWordRegExp = /\b[a-z]|['_][a-z]|\B[A-Z]/g;
function toLatin1UpperCase(x){ // avoid frequent anonymous inline functions
    var charCode = x.charCodeAt(0);
    return charCode===39 ? x : fromCharCode(charCode^32);
}
function titleCase(string){
    return string.replace(firstLetterOfWordRegExp, toLatin1UpperCase);
}

このベンチマーク によると、コードはChromeの次善のソリューションより33％以上高速です。


??????????????????

<textarea id="input" type="text">I'm a little tea pot</textarea><br /><br />
<textarea id="output" type="text" readonly=""></textarea>
<script>
(function(){
    "use strict"
    var fromCode = String.fromCharCode;
    function upper(x){return x[0]==="'"?x:fromCode(x.charCodeAt(0) ^ 32)}
    (input.oninput = function(){
      output.value = input.value.replace(/\b[a-z]|['_][a-z]|\B[A-Z]/g, upper);
    })();
})();
</script>
5
Jack Giffin

また、適切なオプション（特にfreeCodeCampを使用している場合）：

function titleCase(str) {
  var wordsArray = str.toLowerCase().split(/\s+/);
  var upperCased = wordsArray.map(function(Word) {
    return Word.charAt(0).toUpperCase() + Word.substr(1);
  });
  return upperCased.join(" ");
}
4
Cheyenne Crawford
function LetterCapitalize(str) { 
  return str.split(" ").map(item=>item.substring(0,1).toUpperCase()+item.substring(1)).join(" ")
}
3
Alex Varghese

私は通常、読みやすさのために正規表現を使用しないことを好み、またループから離れようとします。これは読みやすいと思います。

function capitalizeFirstLetter(string) {
    return string && string.charAt(0).toUpperCase() + string.substring(1);
};
3
Linh Nguyen

または、replace（）を使用して、各Wordの最初の文字を「upperCase」に置き換えることができます。

function titleCase(str) {
  return str.toLowerCase().split(' ').map(function(Word) {
     return Word.replace(Word[0], Word[0].toUpperCase());
      }).join(' ');
}

titleCase("I'm a little tea pot");
3
ntnbst
text-transform: capitalize;

Cssはそれを持っています:)

3
JohnStone

以下は、文字列内の各単語の最初のアルファベットを大文字にする別の方法です。

プロトタイプを使用して、Stringオブジェクトのカスタムメソッドを作成します。

  String.prototype.capitalize = function() {
      var c = '';
      var s = this.split(' ');
      for (var i = 0; i < s.length; i++) {
          c+= s[i].charAt(0).toUpperCase() + s[i].slice(1) + ' ';
      }
      return c;
  }
  var name = "john doe";
  document.write(name.capitalize());
2
TayabRaza

このルーチンは、ハイフンで連結された単語およびアポストロフィを含む単語を処理します。

function titleCase(txt) {
var firstLtr = 0;
for (var i = 0;i < text.length;i++){
    if (i == 0 &&/[a-zA-Z]/.test(text.charAt(i))) firstLtr = 2;
    if (firstLtr == 0 &&/[a-zA-Z]/.test(text.charAt(i))) firstLtr = 2;
    if (firstLtr == 1 &&/[^a-zA-Z]/.test(text.charAt(i))){
        if (text.charAt(i) == "'"){
            if (i + 2 == text.length &&/[a-zA-Z]/.test(text.charAt(i + 1))) firstLtr = 3;
            else if (i + 2 < text.length &&/[^a-zA-Z]/.test(text.charAt(i + 2))) firstLtr = 3;
        }
    if (firstLtr == 3) firstLtr = 1;
    else firstLtr = 0;
    }
    if (firstLtr == 2){
        firstLtr = 1;
        text = text.substr(0, i) + text.charAt(i).toUpperCase() + text.substr(i + 1);
    }
    else {
        text = text.substr(0, i) + text.charAt(i).toLowerCase() + text.substr(i + 1);
    }
}

}

titleCase（ "pAt o'Neil's"）; //「パットオニール」を返します;

2
Pat

以下の関数は、すべての単語の最初のすべての文字を（つまり、正規表現定義\w+によって）大文字に変換しようとする以外の文字列の他の部分を変更しません。

つまり、notは必ず単語をTitlecaseに変換しますが、質問のタイトルが示すとおりのことを行います。「文字列の各単語の最初の文字を大文字に-JavaScript」

  • 文字列を分割しないでください
  • 各 Word を正規表現\w+で決定します。これは[A-Za-z0-9_]+ と同等です。
    • 関数String.prototype.toUpperCase()を各Wordの最初の文字にのみ適用します。
function first_char_to_uppercase(argument) {
  return argument.replace(/\w+/g, function(Word) {
    return Word.charAt(0).toUpperCase() + Word.slice(1);
  });
}

例：

first_char_to_uppercase("I'm a little tea pot");
// "I'M A Little Tea Pot"
// This may look wrong to you, but was the intended result for me
// You may wanna extend the regex to get the result you desire, e.g., /[\w']+/

first_char_to_uppercase("maRy hAd a lIttLe LaMb");
// "MaRy HAd A LIttLe LaMb"
// Again, it does not convert words to Titlecase

first_char_to_uppercase(
  "ExampleX: CamelCase/UPPERCASE&lowercase,exampleY:N0=apples"
);
// "ExampleX: CamelCase/UPPERCASE&Lowercase,ExampleY:N0=Apples"

first_char_to_uppercase("…n1=orangesFromSPAIN&&n2!='a sub-string inside'");
// "…N1=OrangesFromSPAIN&&N2!='A Sub-String Inside'"

first_char_to_uppercase("snake_case_example_.Train-case-example…");
// "Snake_case_example_.Train-Case-Example…"
// Note that underscore _ is part of the RegEx \w+

first_char_to_uppercase(
  "Capitalize First Letter of each Word in a String - JavaScript"
);
// "Capitalize First Letter Of Each Word In A String - JavaScript"

編集2019-02-07：実際のタイトルケースが必要な場合（つまり、最初の文字のみを大文字にし、他のすべてを小文字にする）：

function titlecase_all_words(argument) {
  return argument.replace(/\w+/g, function(Word) {
    return Word.charAt(0).toUpperCase() + Word.slice(1).toLowerCase();
  });
}

両方を示す例：

test_phrases = [
  "I'm a little tea pot",
  "maRy hAd a lIttLe LaMb",
  "ExampleX: CamelCase/UPPERCASE&lowercase,exampleY:N0=apples",
  "…n1=orangesFromSPAIN&&n2!='a sub-string inside'",
  "snake_case_example_.Train-case-example…",
  "Capitalize First Letter of each Word in a String - JavaScript"
];
for (el in test_phrases) {
  let phrase = test_phrases[el];
  console.log(
    phrase,
    "<- input phrase\n",
    first_char_to_uppercase(phrase),
    "<- first_char_to_uppercase\n",
    titlecase_all_words(phrase),
    "<- titlecase_all_words\n "
  );
}

// I'm a little tea pot <- input phrase
// I'M A Little Tea Pot <- first_char_to_uppercase
// I'M A Little Tea Pot <- titlecase_all_words

// maRy hAd a lIttLe LaMb <- input phrase
// MaRy HAd A LIttLe LaMb <- first_char_to_uppercase
// Mary Had A Little Lamb <- titlecase_all_words

// ExampleX: CamelCase/UPPERCASE&lowercase,exampleY:N0=apples <- input phrase
// ExampleX: CamelCase/UPPERCASE&Lowercase,ExampleY:N0=Apples <- first_char_to_uppercase
// Examplex: Camelcase/Uppercase&Lowercase,Exampley:N0=Apples <- titlecase_all_words

// …n1=orangesFromSPAIN&&n2!='a sub-string inside' <- input phrase
// …N1=OrangesFromSPAIN&&N2!='A Sub-String Inside' <- first_char_to_uppercase
// …N1=Orangesfromspain&&N2!='A Sub-String Inside' <- titlecase_all_words

// snake_case_example_.Train-case-example… <- input phrase
// Snake_case_example_.Train-Case-Example… <- first_char_to_uppercase
// Snake_case_example_.Train-Case-Example… <- titlecase_all_words

// Capitalize First Letter of each Word in a String - JavaScript <- input phrase
// Capitalize First Letter Of Each Word In A String - JavaScript <- first_char_to_uppercase
// Capitalize First Letter Of Each Word In A String - Javascript <- titlecase_all_words
2
iolsmit
function titleCase(str) {

var myString = str.toLowerCase().split(' ');
for (var i = 0; i < myString.length; i++) {
    var subString = myString[i].split('');
    for (var j = 0; j < subString.length; j++) {
        subString[0] = subString[0].toUpperCase();

    }
    myString[i] = subString.join('');
}

return myString.join(' '); }
2
thiagorls

RegExpでreplace()を使用

function titleCase(str) {

  var newStr = str.toLowerCase().replace(/./, (x) => x.toUpperCase()).replace(/[^']\b\w/g, (y) => y.toUpperCase());


console.log(newStr);

}

titleCase("I'm a little tea pot")
1
Eli Johnson

基本的にmap関数を使用してそれを行う方法は次のとおりです。受け入れられた答えと同じですが、for-loopがありません。したがって、数行のコードを節約できます。

function titleCase(text) {
  if (!text) return text;
  if (typeof text !== 'string') throw "invalid argument";

  return text.toLowerCase().split(' ').map(value => {
    return value.charAt(0).toUpperCase() + value.substring(1);
  }).join(' ');
}

console.log(titleCase("I'm A little tea pot"));
1
Hamzeen Hameem

生コード：

function capi(str) {
    var s2 = str.trim().toLowerCase().split(' ');
  var s3 = [];
  s2.forEach(function(elem, i) {
          s3.Push(elem.charAt(0).toUpperCase().concat(elem.substring(1)));  
  });
  return s3.join(' ');
}
capi('js string exasd');
1
Chris

以下のコードを確認してください。

function titleCase(str) {
  var splitStr = str.toLowerCase().split(' ');
  var nstr = ""; 
  for (var i = 0; i < splitStr.length; i++) {
    nstr +=  (splitStr[i].charAt(0).toUpperCase()+ splitStr[i].slice(1) + " 
    ");
  }
  console.log(nstr);
}

var strng = "this is a new demo for checking the string";
titleCase(strng);
0
Sunil Kumar
/* 1. Transform your string into lower case
2. Split your string into an array. Notice the white space i'm using for separator
3. Iterate the new array, and assign the current iteration value (array[c]) a new formatted string:
 - With the sentence: array[c][0].toUpperCase() the first letter of the string converts to upper case.
 - With the sentence: array[c].substring(1) we get the rest of the string (from the second letter index to the last one).
 - The "add" (+) character is for concatenate both strings. 
4. return array.join(' ') // returns the formatted array like a new string.*/


function titleCase(str){
    str = str.toLowerCase();
    var array = str.split(' ');
    for(var c = 0; c < array.length; c++){
        array[c] = array[c][0].toUpperCase() + array[c].substring(1);
    }
return array.join(' ');
}

titleCase("I'm a little tea pot");
0
Israel Calderón

ECMA2017またはES8現在

const titleCase = (string) => {
  return string
    .split(' ')
    .map(Word => Word.substr(0,1).toUpperCase() + Word.substr(1,Word.length))
    .join(' ');
};

let result = titleCase('test test test');
console.log(result);





0
Pulkit Aggarwal

@somethingthereの提案するソリューションのよりコンパクトな（そして最新の）書き換え：

function titleCase(str) {
    return str.toLowerCase().split(' ').map(function(chunk){
        return chunk.charAt(0).toUpperCase() + chunk.substring(1);
    }).join(' ');
}
    
document.write(titleCase("I'm an even smaller tea pot"));
0
Dag Sondre Hansen