[javascript] JavaScript를 사용하여 문자열에서 각 단어의 첫 글자를 대문자로 바꾸려면 어떻게해야합니까?

Question 1

문자열에서 모든 단어의 첫 글자를 대문자로 바꾸는 함수를 작성하려고합니다 (문자열을 제목 케이스로 변환).

예를 들어 입력이 "I'm a little tea pot"이면 "I'm A Little Tea Pot"출력이 될 것으로 예상 합니다. 그러나이 함수는 "i'm a little tea pot".

이것은 내 코드입니다.

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;
}

console.log(titleCase("I'm a little tea pot"));

스 니펫 확장

Question 2

변경 사항을 어레이에 다시 할당하지 않으므로 모든 노력이 헛된 것입니다. 이 시도:

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

스 니펫 확장

Question 3

당신은 복잡한 것을 매우 쉽게 만들고 있습니다. CSS에 다음을 추가 할 수 있습니다.

.capitalize {
    text-transform: capitalize;
}

자바 스크립트에서는 요소에 클래스를 추가 할 수 있습니다.

 document.getElementById("element").className = "capitalize";

Question 4

ECMAScript 6 버전 :

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);

스 니펫 확장

Question 5

이 방법이 더 빨라야한다고 생각합니다. 문자열을 분할하고 다시 결합하지 않기 때문입니다. 정규식을 사용합니다.

var str = text.replace(/(^\w{1})|(\s{1}\w{1})/g, match => match.toUpperCase());

설명 :

(^\w{1}): 문자열의 첫 번째 문자와 일치
|: 또는
(\s{1}\w{1}): 하나의 공백 뒤에 오는 하나의 문자와 일치
g: 모두 일치
match => match.toUpperCase () : 바꾸기는 함수를 가질 수 있으므로; 일치를 대문자 일치로 교체

Question 6

타사 라이브러리를 사용할 수 있다면 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>

스 니펫 확장

Question 7

ECMAScript 6에서 화살표 기능을 사용한 한 줄 답변 :

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

Question 8

최단 원 라이너 (매우 빠름) :

 text.replace(/(^\w|\s\w)/g, m => m.toUpperCase());

설명:

^\w : 문자열의 첫 번째 문자
| : 또는
\s\w : 공백 뒤의 첫 문자
(^\w|\s\w) 패턴을 캡처하십시오.
g 플래그 : 모든 항목과 일치합니다.

나머지가 소문자인지 확인하려면 다음을 수행하십시오.

text.replace(/(^\w|\s\w)(\S*)/g, (_,m1,m2) => m1.toUpperCase()+m2.toLowerCase())