JavaScript를 사용하여 문자열을 제목으로 변환


549

문자열을 제목 대소 문자로 변환하는 간단한 방법이 있습니까? 예를 john smith하게된다 John Smith. 나는 John Resig의 해결책 과 같은 복잡한 것을 찾고 있지 않습니다 .


다양한 방법이 있습니다. 성능 통계가 있습니까?
theAnubhav

이 짧은 답변을 chech하시기 바랍니다 stackoverflow.com/a/57689168/10373693 나는 그것이 당신이 찾고있는 답변이되기를 바랍니다.
Abhishek Kumar

답변:


740

이 시도:

    function toTitleCase(str) {
        return str.replace(
            /\w\S*/g,
            function(txt) {
                return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
            }
        );
    }
<form>
Input:
<br /><textarea name="input" onchange="form.output.value=toTitleCase(this.value)"  onkeyup="form.output.value=toTitleCase(this.value)"></textarea>
<br />Output:
<br /><textarea name="output" readonly onclick="select(this)"></textarea>
</form>


14
누구든지 또는 \w\S*대신에 왜 사용 되는지 설명해 주 시겠습니까? 나는 왜 공백 이외의 것을 포함하고 싶기 때문에 Jim-BobJim-bob으로 변경 해야하는지 모르겠습니다 . \w+\w*
martinczerwi

5
@martinCzerwi는 우리 쪽에서도 문제를 \w\S*일으켰습니다 Jim-bob. \w*이것을 사용하여 해결했습니다.
Bouke

14
/([^\W_]+[^\s-]*) */gJim-Bobjim-bob --> Jim-Bob
recursion.ninja

15
이것이 jim-bob --> Jim-Bob당신의 욕망이라면 아마도해야 할 것입니다 /\b\w+/g. 예 :str.replace(/\b\w+/g,function(s){return s.charAt(0).toUpperCase() + s.substr(1).toLowerCase();});
vol7ron

3
\w\S*대신 사용 \w+또는 \w*단어처럼 너무 Don't로 변경되지 않습니다 Don'T,하지만 다른 사람들이 지적 밖으로 가지고 \w\S*하이픈 단어에 문제가 발생합니다.
doubleDown

198

Greg Dean의 기능을 적응시키는 약간 더 우아한 방법 :

String.prototype.toProperCase = function () {
    return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
};

다음과 같이 호출하십시오.

"pascal".toProperCase();

3
당신이 그들의 이름에 대시 사용자를 가지고 있고 입력하면 명심 Jo-Ann Smith이 코드로 변환됩니다, Jo-ann Smith(소문자주의 a의를 Ann).
dbau

18
@daniellmb 왜 문자열 프로토 타입을 변경하지 않아야합니까? 나는 그것이 좋은 해결책이라고 생각합니다. 루비 오픈 클래스를 생각하면 기존 클래스에 함수를 추가하는 것이 완벽하게 유효하며 널리 사용됩니다.
marco-fiset

97
@ marco-fiset 다른 사람들과 잘 어울리지 않기 때문에! 호환되지 않는 변경 사항으로 기본 JavaScript 오브젝트를 수정하려고하는 두 개의 라이브러리가있는 경우 나쁜 일이 발생합니다. jQuery와 Google Maps가이 디자인 패턴을 따른다면 같은 페이지에 둘 다 가질 수 없다고 상상해보십시오.
daniellmb

5
@daniellmb 훌륭한 지적입니다. 메소드 이름을 접두어로 사용하면 메소드를 열거 할 수 없으므로이를 피하는 데 도움이됩니다.
mikemaccana 2013

60
"기본 JavaScript 객체를 수정하지 마십시오"문은 "goto를 사용하지 마십시오"또는 "eval is evil"과 같습니다. 괜찮은 경우가 많이 있습니다. 프로젝트를 완전히 제어하고 물론 라이브러리로 릴리스 할 계획이 없다면이 방법에 아무런 문제가 없습니다.
FoxMulder900

175

텍스트 변환 CSS 스타일을 컨트롤 에 적용하십시오 .

예 : (text-transform: capitalize);

꼭 필요한 경우에만 JS 접근 방식을 사용하십시오.


36
-1. 이 CSS는 작동하지만 텍스트가 모두 대문자로 시작하면 효과가 없기 때문에 대부분의 사람들이 기대하는대로 작동하지 않습니다. webmasterworld.com/forum83/7506.htm
휘트니 랜드

2
@Akshar : 소문자 규칙은 제목 대소 문자 규칙으로 대체됩니다. CSS는 소스 내용을 수정하지 않기 때문에 소문자 규칙이 제거되고 (모든 대문자로 소스 내용이 남음) 제목 규칙이 적용됩니다 (아무것도하지 않음).
dokkaebi

42
JS는 브라우저 외부에서 사용됩니다.
mikemaccana 2013

4
문제는 "문자열을 제목으로 변환하는 간단한 방법이 있습니까?" . 이 답변은 문자열을 변환하지 않습니다. 문자열 위에 적용되는 스타일입니다.
kingPuppy

데이터베이스의 데이터를 정리하여 타사 서비스로 전달하거나 CSV로 내보낼 때 데이터를 깨끗하게 사용할 수있게하려면 CSS가 실제로 옵션이 아닙니다. CSS는 화장품을위한 것으로, 수년에 걸쳐 많이 성장해 왔으며 이러한 종류의 문제를 해결하는 데 사용할 수 있지만 솔루션은 외관상 남아 있으며 근본적인 문제는 해결하지 못합니다.
Adam Reis

118

여기 내 버전이 있습니다. IMO 이해하기 쉽고 우아합니다.

var str = "foo bar baz"

console.log(

str.split(' ')
   .map(w => w[0].toUpperCase() + w.substr(1).toLowerCase())
   .join(' ')

)
// returns "Foo Bar Baz"


3
또는 매핑에서 하위 문자열을 소문자로 지정할 수 있습니다.str.split(' ').map(i => i[0].toUpperCase() + i.substring(1).toLowerCase()).join(' ')
Dave Land

5
전화하는 것에 동의하지 않습니다 .toLowerCase(). "McDonald"와 같은 이름 또는 "ASAP"와 같은 약어는 대문자를 유지해야합니다. 누군가 "heLLO"와 같은 문자열을 실제로 전달한 경우 응용 프로그램은 대문자가 잘못되었다고 가정해서는 안됩니다.
토마스 히긴 보텀

1
@ThomasHigginbotham 이건 어때? String.prototype.toTitleCase = function (blnForceLower) { var strReturn; (blnForceLower ? strReturn = this.toLowerCase() : strReturn = this); return strReturn .split(' ') .map(i => i[0].toUpperCase() + i.substr(1)) .join(' '); }
Sean Kendle

예, 소문자를 강제로 적용하는 옵션을 제공하는 것이 좋습니다.
토마스 히긴 보텀

1
str단일 문자 인 경우 중단됩니다 .
Madbreaks

103

다음은 제목으로 변환하지만 정의 된 약어는 대문자로, 작은 단어는 소문자로 유지하는 함수입니다.

String.prototype.toTitleCase = function() {
  var i, j, str, lowers, uppers;
  str = this.replace(/([^\W_]+[^\s-]*) */g, function(txt) {
    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
  });

  // Certain minor words should be left lowercase unless 
  // they are the first or last words in the string
  lowers = ['A', 'An', 'The', 'And', 'But', 'Or', 'For', 'Nor', 'As', 'At', 
  'By', 'For', 'From', 'In', 'Into', 'Near', 'Of', 'On', 'Onto', 'To', 'With'];
  for (i = 0, j = lowers.length; i < j; i++)
    str = str.replace(new RegExp('\\s' + lowers[i] + '\\s', 'g'), 
      function(txt) {
        return txt.toLowerCase();
      });

  // Certain words such as initialisms or acronyms should be left uppercase
  uppers = ['Id', 'Tv'];
  for (i = 0, j = uppers.length; i < j; i++)
    str = str.replace(new RegExp('\\b' + uppers[i] + '\\b', 'g'), 
      uppers[i].toUpperCase());

  return str;
}

예를 들면 다음과 같습니다.

"TO LOGIN TO THIS SITE and watch tv, please enter a valid id:".toTitleCase();
// Returns: "To Login to This Site and Watch TV, Please Enter a Valid ID:"

1
나는 당신을 좋아했고, 로마 숫자를 다룰 때 문제가 발생했습니다 ... 그냥 I, II, III, IV 등으로 패치했습니다.
Marcelo

2
결정된. 이 문제를 해결하기 위해 세 번째 줄의 정규 표현식 이 위의 @awashburn의 의견 /\w\S*/g/([^\W_]+[^\s-]*) */g따라 변경되었습니다 .
Geoffrey Booth

2
정규식 패턴을 통해 얻을 수있는 이점이 /\b\w+/g있습니까? 더 빨리 이해할 수 있습니까?
마이클 - 클레이 셔키는 어디

2
내가 알 수없는 것은 단순히 하이픈으로 묶인 단어 문제를 해결하기 위해 다른 주석가의 제안을 취하는 것이 었습니다. 그러나 정규 표현식도 마찬가지로하는 것처럼 보이고 단순성이 항상 좋습니다. 이 게시물에 대한 후손과 미래 방문자를 위해, 나는 단지에서 세 번째 줄에 정규식을 변경 /([^\W_]+[^\s-]*) */g하는 /\b\w+/g마이클의 코멘트 @ 당; 더 복잡한 정규 표현식이 필요한 경우를 찾으면 의견을 말하십시오.
Geoffrey Booth

1
/\b[\w-\']+/g하이픈으로 묶인 단어와 아포스트로피를 단어로 사용할 수 있도록 세 번째 줄 정규식을 변경했습니다 .
Shamasis Bhattacharya

47

다른 답변보다 다음을 선호합니다. 각 단어의 첫 글자 만 일치하고 대문자를 사용합니다. 더 간단한 코드, 더 읽기 쉽고 바이트가 적습니다. 약어가 왜곡되는 것을 방지하기 위해 기존 대문자를 유지합니다. 그러나 항상 toLowerCase()문자열을 먼저 호출 할 수 있습니다 .

function title(str) {
  return str.replace(/(^|\s)\S/g, function(t) { return t.toUpperCase() });
}

이것을 문자열 프로토 타입에 추가하면 'my string'.toTitle()다음과 같이 할 수 있습니다 .

String.prototype.toTitle = function() {
  return this.replace(/(^|\s)\S/g, function(t) { return t.toUpperCase() });
}

예:


3
람다처럼 더 멋지다const titleCase = (str) => str.replace(/\b\S/g, t => t.toUpperCase());
0xcaff

IE를 중단하고 싶지는 않지만 응용 프로그램이 기존 브라우저에 민감하지 않으면 더 짧을 수 있습니다.
Tom Kay

이것은 부분적인 해결책 일뿐입니다. op는 문자열을 제목 대소 문자로 변환하는 방법을 묻습니다. 이 답변은와 같은 입력에 대해서는 달성하지 못합니다 NoT qUiITe.
Madbreaks

@Madbreaks이 질문은 대소 문자가 혼합 된 입력을 변환해야한다고 규정하지 않았습니다. 그러나,에 대한 답변을 업데이트했습니다 toLowerCase. 두문자어가 깨질 수 있습니다. an HTML document: An HTML DocumentvsAn Html Document
Tom Kay

4
@Madbreaks 초기 예제가 작성되었지만 입력 값이 대문자 인 경우 출력이 변경되지 않는다는 점을 지적하는 것이 좋습니다. 즉, 답변은 그대로 (편집 제안 toLowerCase) 개발자의 의도를 가정하는 것보다 유연하고 유용하다고 생각합니다. 이 방법은 또한 PHP ( ucwords) 및 Golang ( strings.Title) 과 같은 다른 언어의 유사한 내장 방법의 기능을 반영합니다 . .NET ( TextInfo.ToTitleCase)은 대소 문자를 혼합하여 흥미롭게 작동하지만 완전히 대문자로 된 문자열은 변경하지 않습니다.
Tom Kay

20

참조 용으로 정규 표현식을 사용하지 않는 경우 :

String.prototype.toProperCase = function() {
  var words = this.split(' ');
  var results = [];
  for (var i = 0; i < words.length; i++) {
    var letter = words[i].charAt(0).toUpperCase();
    results.push(letter + words[i].slice(1));
  }
  return results.join(' ');
};

console.log(
  'john smith'.toProperCase()
)


정규식 무료 솔루션에 감사드립니다!
lucifer63

20

var result =
  'this is very interesting'.replace(/\b[a-z]/g, (x) => x.toUpperCase())

console.log(result) // This Is Very Interesting


단지 () 구성은 일련의 옵션 중 하나에 대한 일치를 지정하기위한 것입니다. 즉, (a | b)는 a 또는 b와 일치합니다. 건축 (.)은 무엇을합니까?
Michael Blackburn

동일한 질문이있는 사람은 대체 섹션에서 사용되는 대체 "블롭"을 정의합니다. 얼룩은 순차적으로 번호가 매겨지며 첫 번째 ()는 $ 1에, 두 번째는 $ 2에 넣습니다. :이 사이트 유용하다고 javascript.info/tutorial/regular-expressions-methods을
마이클 블랙번에게

위의 작업을 수행 할 수는 없지만 정규식 마법사와는 거리가 멀습니다. 나는 'string'.replace(/^(.)(.*)/,function(s,p1,p2){return p1.toUpperCase()+p2;}) 다시 사용하고 있는데 , 이것은 문자열의 첫 글자를 대문자로만 사용할 수 있지만 필요한 경우 내 건축이 작동합니다.
Michael Blackburn

1
어떤 이유로 FF35가 질식하는 '$1'.toUpperCase()것처럼 보이며, 값이 할당 될 때 대문자가 수행되지 않은 것 같습니다. 기능을 사용하여 해결'string'.replace(/^(.){1}/,function(match) { return match.toUpperCase(); })
MrYellow

안녕 모두 답변이 수정되었습니다! 처음 게시 할 때까지 제대로 작동했다고 확신합니다. 어쨌든 입력 주셔서 감사합니다!
simo

17

당신은 즉시 toLowerCase문자열을 한 다음 toUpperCase각 단어의 첫 글자 만 할 수 있습니다. 매우 간단한 1 라이너가됩니다 :

function titleCase(str) {
  return str.toLowerCase().replace(/\b(\w)/g, s => s.toUpperCase());
}

console.log(titleCase('iron man'));
console.log(titleCase('iNcrEdible hulK'));


나는이 해결책을 좋아한다; 좋고 간단합니다. 그래도 약간의 CoffeeScript가 답변에 빠져 들었습니다 ( s => s.toUpperCase()). 내 변형은 당신이 한 일을하지만 String 객체를 확장하는 것입니다 (그렇게 논쟁의 여지가 있습니다) :Object.defineProperty(String.prototype, '_toProperCase', {value:function() {return this.toLowerCase().replace(/\b(\w)/g, function(t) {return t.toUpperCase()})}})
Waz

1
@ 와즈, 아이디어 주셔서 감사합니다! 그냥에 명확히 싶어 =>, 그건입니다 기본 화살표 기능 (ES6가), 링크도 지원 테이블을 제공하고 그들에 Mozillla 문서로 이동합니다.
KevBot

16

필러 단어가 걱정되는 경우 항상 대문자로 표시하지 말아야 할 것을 함수에 알려줄 수 있습니다.

/**
 * @param String str The text to be converted to titleCase.
 * @param Array glue the words to leave in lowercase. 
 */
var titleCase = function(str, glue){
    glue = (glue) ? glue : ['of', 'for', 'and'];
    return str.replace(/(\w)(\w*)/g, function(_, i, r){
        var j = i.toUpperCase() + (r != null ? r : "");
        return (glue.indexOf(j.toLowerCase())<0)?j:j.toLowerCase();
    });
};

이것이 도움이되기를 바랍니다.

편집하다

선행 접착제 단어를 처리하려면 하나 이상의 변수를 사용하여이를 추적 할 수 있습니다.

var titleCase = function(str, glue){
    glue = !!glue ? glue : ['of', 'for', 'and', 'a'];
    var first = true;
    return str.replace(/(\w)(\w*)/g, function(_, i, r) {
        var j = i.toUpperCase() + (r != null ? r : '').toLowerCase();
        var result = ((glue.indexOf(j.toLowerCase()) < 0) || first) ? j : j.toLowerCase();
        first = false;
        return result;
    });
};

2
문자열을 배열로 분해 할 수 있습니다. 그래서 우리는 포르투갈어, 스페인어, 이탈리아어 및 프랑스어 전치사를 가질 수있었습니다 :glue ='de|da|del|dos|do|das|des|la|della|delli'.split('|');
Junior Mayhé

이것은 첫 단어의 대문자를 보장하지는 않습니다. 즉 and another thing이된다 and Another Thing. 항상 첫 단어를 대문자로 바꾸는 우아한 방법이 필요합니다.
Brad Koch

@BradKoch-공백으로 채워서 검색어로 '및', 'de'등을 사용하면 'And Another And Another'가 'And Another and Another'로 바뀝니다.
Yimin Rong

H'Dy 또는 번호 - 하나처럼 - 그것을 제외하고 좋은 후 '또한 텍스트를 대문자로
luky

삼항 연산자를 사용하는 대신 폴백을 사용할 수 있습니다. glue = glue || [ 'of', 'for', 'and', 'a'];
tm2josep

14

위의 솔루션에 사용 된 정규식이 혼란 스러우면이 코드를 사용해보십시오.

function titleCase(str) {
  return str.split(' ').map(function(val){ 
    return val.charAt(0).toUpperCase() + val.substr(1).toLowerCase();
  }).join(' ');
}

그것을 사랑하십시오! 배열로 변환하지 않습니다.
neelmeg

1
있자나 ... split 않기 때문에 배열로 변환, 당신은 단지로 분명히 표시되지 않습니다 map당신이 사용하지 않는 수단 []표기
MalcolmOcean

2
이것은 2 년 전의 a8m 답변 과 동일 합니다.
마이클 - 클레이 셔키는 어디

1
단일 문자 입력을 중단합니다.
Madbreaks

1
@AlexChaffee 개정 내역을 확인하십시오. a8m은 원래 답변에서 화살표 기능을 사용하지 않았습니다.
감사합니다

9

"McDonald"또는 "MacDonald"또는 "O'Toole"또는 "D' Orazio"와 같은 성을 처리 할 수있는이 기능을 만들었습니다. 그러나 종종 "소문자"인 "van"또는 "von"으로 독일어 또는 네덜란드어 이름을 처리하지 않습니다. "de"는 종종 "Robert de Niro"와 같이 소문자라고 생각합니다. 이것들은 여전히 ​​해결되어야 할 것입니다.

function toProperCase(s)
{
  return s.toLowerCase().replace( /\b((m)(a?c))?(\w)/g,
          function($1, $2, $3, $4, $5) { if($2){return $3.toUpperCase()+$4+$5.toUpperCase();} return $1.toUpperCase(); });
}

1
이름 인식 +1 그래도 "macy"를 올바르게 처리하지 않습니다.
brianary

대문자와 소문자 변환을 올바르게 처리하고 "미국령 버진 아일랜드"와 같은 이니셜을 발견 한 유일한 기능이었습니다.
로드리고 폴로

당신은 주위를 얻을 수 macy있도록 거기에 부정적인를 내다을 넣어 문제 \b((m)(a?c))?(\w)가된다\b((m)(a?c))?(\w)(?!\s)
인트를

8
var toMatch = "john w. smith";
var result = toMatch.replace(/(\w)(\w*)/g, function (_, i, r) {
      return i.toUpperCase() + (r != null ? r : "");
    }
)

작동하는 것 같습니다 ... 위의 "빠른 갈색 여우? file1.txt ".

2nd 대신 2Nd를 원하면로 변경할 수 있습니다 /([a-z])(\w*)/g.

첫 번째 양식은 다음과 같이 단순화 할 수 있습니다.

function toTitleCase(toTransform) {
  return toTransform.replace(/\b([a-z])/g, function (_, initial) {
      return initial.toUpperCase();
  });
}

7

이 시도

String.prototype.toProperCase = function(){
    return this.toLowerCase().replace(/(^[a-z]| [a-z]|-[a-z])/g, 
        function($1){
            return $1.toUpperCase();
        }
    );
};

var str = 'john smith';
str.toProperCase();

7

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


7

가장 짧은 방법으로 시도하십시오.

str.replace(/(^[a-z])|(\s+[a-z])/g, txt => txt.toUpperCase());

7

ES 6

str.split(' ')
   .map(s => s.slice(0, 1).toUpperCase() + s.slice(1).toLowerCase())
   .join(' ')

그밖에

str.split(' ').map(function (s) {
    return s.slice(0, 1).toUpperCase() + s.slice(1).toLowerCase();
}).join(' ')

s.slice(0, 1).toUpperCase()당신은 여전히 ​​첫 번째 편지를 원한다면 아마 머리 위로해야합니다 .
WindsofTime

@jssridhar 또한 ES6의 코드를 수정해야합니다.
caiosm1005

1
str단일 문자 인 경우
중단

@jssridhar는 우리에게 더 나을지도 모른다 .charAt(0).toUpperCase().
roydukkey

2
a8m의 답변의 복제
감사합니다.

6

이러한 답변의 대부분은 단어 경계 메타 문자 (\ b)를 사용할 가능성을 무시하는 것 같습니다. 그것을 활용 한 그렉 딘의 대답의 짧은 버전 :

function toTitleCase(str)
{
    return str.replace(/\b\w/g, function (txt) { return txt.toUpperCase(); });
}

Jim-Bob과 같은 하이픈 이름에도 적용됩니다.


2
우아한 부분 솔루션이지만 악센트 또는 대문자 문자열에서는 작동하지 않습니다. "Sofía Vergara"=> "SofíA Vergara"또는 "Sofía VERGARA"=> "SofíA VERGARA"가 표시됩니다. 두 번째 경우는 .replace (...) 전에 apply .toLowerCase () 함수를 사용하여 해결할 수 있습니다. 첫 번째 경우는 올바른 정규식을 찾아야합니다.
Asereware

2
흠, 그것은 정규식 구현의 버그처럼 보입니다. 악센트 문자는 단어 문자 여야한다고 생각합니다 (그러나 그 경우에는 작동하지 않으므로 정확합니다).
lewax00

\w[A-Za-z0-9_]모든 문자가 아닌 문자 만 포함합니다 . 이를 위해서는 유니 코드 범주를 사용해야합니다 \p{L}. 당신은해야합니다 /u수정합니다 ( 여기 )와에 대해 서로 다른 솔루션 \b만을 사이에 작동 \W\w(참조 여기에 )
cmbuckley

6

가장 간단한 방법은 CSS를 사용하는 것입니다.

function format_str(str) {
    str = str.toLowerCase();
    return '<span style="text-transform: capitalize">'+ str +'</span>';
}

코드를 업데이트하고 테스트했습니다. 지금 작동합니다.
wondim

JS가 사용되는 일부 환경에서만 CSS를 사용할 수 있으므로이 솔루션을 사용할 수 없습니다. 또한 인라인 스타일은 모든 비용을 피해야합니다.
Madbreaks

5

/\S+/g분음 부호를 지원하는 데 사용하십시오 .

function toTitleCase(str) {
  return str.replace(/\S+/g, str => str.charAt(0).toUpperCase() + str.substr(1).toLowerCase());
}

console.log(toTitleCase("a city named örebro")); // A City Named Örebro

그러나 " s 빛나기 ( y ellow)"⇒ " S 빛나기 ( y ellow)"


5

여기에 나열된toTitleCase 문법 규칙을 고려한 강력한 기능이 필요했기 때문에 자체 답변을 추가하고 싶었 습니다. (Google 권장 기사). 입력 문자열의 길이에 따라 다양한 규칙이 있습니다. 아래는 기능 + 단위 테스트입니다.

이 기능은 또한 공백을 통합하고 특수 문자를 제거합니다 (필요에 따라 정규식 수정)

toTitleCase 함수

const toTitleCase = (str) => {
  const articles = ['a', 'an', 'the'];
  const conjunctions = ['for', 'and', 'nor', 'but', 'or', 'yet', 'so'];
  const prepositions = [
    'with', 'at', 'from', 'into','upon', 'of', 'to', 'in', 'for',
    'on', 'by', 'like', 'over', 'plus', 'but', 'up', 'down', 'off', 'near'
  ];

  // The list of spacial characters can be tweaked here
  const replaceCharsWithSpace = (str) => str.replace(/[^0-9a-z&/\\]/gi, ' ').replace(/(\s\s+)/gi, ' ');
  const capitalizeFirstLetter = (str) => str.charAt(0).toUpperCase() + str.substr(1);
  const normalizeStr = (str) => str.toLowerCase().trim();
  const shouldCapitalize = (word, fullWordList, posWithinStr) => {
    if ((posWithinStr == 0) || (posWithinStr == fullWordList.length - 1)) {
      return true;
    }

    return !(articles.includes(word) || conjunctions.includes(word) || prepositions.includes(word));
  }

  str = replaceCharsWithSpace(str);
  str = normalizeStr(str);

  let words = str.split(' ');
  if (words.length <= 2) { // Strings less than 3 words long should always have first words capitalized
    words = words.map(w => capitalizeFirstLetter(w));
  }
  else {
    for (let i = 0; i < words.length; i++) {
      words[i] = (shouldCapitalize(words[i], words, i) ? capitalizeFirstLetter(words[i], words, i) : words[i]);
    }
  }

  return words.join(' ');
}

정확성을 보장하기위한 단위 테스트

import { expect } from 'chai';
import { toTitleCase } from '../../src/lib/stringHelper';

describe('toTitleCase', () => {
  it('Capitalizes first letter of each word irrespective of articles, conjunctions or prepositions if string is no greater than two words long', function(){
    expect(toTitleCase('the dog')).to.equal('The Dog'); // Capitalize articles when only two words long
    expect(toTitleCase('for all')).to.equal('For All'); // Capitalize conjunctions when only two words long
    expect(toTitleCase('with cats')).to.equal('With Cats'); // Capitalize prepositions when only two words long
  });

  it('Always capitalize first and last words in a string irrespective of articles, conjunctions or prepositions', function(){
    expect(toTitleCase('the beautiful dog')).to.equal('The Beautiful Dog');
    expect(toTitleCase('for all the deadly ninjas, be it so')).to.equal('For All the Deadly Ninjas Be It So');
    expect(toTitleCase('with cats and dogs we are near')).to.equal('With Cats and Dogs We Are Near');
  });

  it('Replace special characters with space', function(){
    expect(toTitleCase('[wolves & lions]: be careful')).to.equal('Wolves & Lions Be Careful');
    expect(toTitleCase('wolves & lions, be careful')).to.equal('Wolves & Lions Be Careful');
  });

  it('Trim whitespace at beginning and end', function(){
    expect(toTitleCase(' mario & Luigi superstar saga ')).to.equal('Mario & Luigi Superstar Saga');
  });

  it('articles, conjunctions and prepositions should not be capitalized in strings of 3+ words', function(){
    expect(toTitleCase('The wolf and the lion: a tale of two like animals')).to.equal('The Wolf and the Lion a Tale of Two like Animals');
    expect(toTitleCase('the  three Musketeers  And plus ')).to.equal('The Three Musketeers and Plus');
  });
});

제공된 문자열에서 꽤 많은 특수 문자를 제거하고 있습니다. 프로젝트 요구 사항을 해결하려면 정규식을 조정해야합니다.


제목 솔루션을 실제로 처리하기 때문에이 솔루션을 선호합니다. 그것은 그것의 "바람과 함께 사라지다", "바람과 함께 사라지다"아니에요
russellmania

5
"john f. kennedy".replace(/\b\S/g, t => t.toUpperCase())

1
샘플에서는 작동 o'henry하지만로 이상한 일을 horse's mouth합니다.
마이클-클레이는 어 r 지

"john f. kennEdy".toLowerCase().replace(/\b\S/g, t => t.toUpperCase())더 나은 🤔
w3debugger

프록시 모의 대답 @ 편집 싶지 않았다 다음을 \b하고 \S특별한 문자 클래스 "단어 경계"와 "하나의 공백이 아닌 문자를 나타내는. 따라서 정규 표현식은 단어 경계를 따르는 모든 단일 문자를 일치시키고 주어진 화살표 함수를 적용하여 해당 문자를 대문자로 만듭니다.
Jens

4

"lewax00"솔루션을 사용하여 공백으로 시작하는 "w"또는 단어를 시작하는 "w"로 강제하지만 추가 중간 공간을 제거 할 수없는이 간단한 솔루션을 만들었습니다.

"SOFÍA vergara".toLowerCase().replace(/\b(\s\w|^\w)/g, function (txt) { return txt.toUpperCase(); });

결과는 "Sofía Vergara"입니다.


4

다음은 악센트 문자 (프랑스어에 중요합니다)를 처리하고 하위 예외 처리를 켜거나 끌 수있는 내 기능입니다. 희망이 도움이됩니다.

String.prototype.titlecase = function(lang, withLowers = false) {
    var i, string, lowers, uppers;

    string = this.replace(/([^\s:\-'])([^\s:\-']*)/g, function(txt) {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    }).replace(/Mc(.)/g, function(match, next) {
        return 'Mc' + next.toUpperCase();
    });

    if (withLowers) {
        if (lang == 'EN') {
            lowers = ['A', 'An', 'The', 'At', 'By', 'For', 'In', 'Of', 'On', 'To', 'Up', 'And', 'As', 'But', 'Or', 'Nor', 'Not'];
        }
        else {
            lowers = ['Un', 'Une', 'Le', 'La', 'Les', 'Du', 'De', 'Des', 'À', 'Au', 'Aux', 'Par', 'Pour', 'Dans', 'Sur', 'Et', 'Comme', 'Mais', 'Ou', 'Où', 'Ne', 'Ni', 'Pas'];
        }
        for (i = 0; i < lowers.length; i++) {
            string = string.replace(new RegExp('\\s' + lowers[i] + '\\s', 'g'), function(txt) {
                return txt.toLowerCase();
            });
        }
    }

    uppers = ['Id', 'R&d'];
    for (i = 0; i < uppers.length; i++) {
        string = string.replace(new RegExp('\\b' + uppers[i] + '\\b', 'g'), uppers[i].toUpperCase());
    }

    return string;
}

4

우리는 사무실에서 다시 토론을 해 왔으며 사람들이 원하는 방식으로 이름을 입력하는 방식을 자동으로 수정하려고하면 가능한 문제가 있다고 생각합니다.

우리는 서로 다른 유형의 자동 대문자가 다른 몇 가지 경우를 생각해 냈는데 , 이는 영어 이름만을위한 것이며 각 언어마다 고유 한 복잡성이 있습니다.

각 이름의 첫 글자를 대문자로 표기 할 때의 문제 :

• IBM과 같은 약어는 입력 할 수 없으며 Ibm으로 바뀝니다.

• 맥도날드라는 이름은 맥도날드로 바뀌게되는데, 맥도날드도 마찬가지입니다.

• Marie-Tonks와 같은 이중 배럴 이름은 Marie-tonks로 바뀝니다.

• O'Connor와 같은 이름은 O'connor로 바뀔 것입니다.

대부분의 경우이를 처리하기 위해 사용자 지정 규칙을 작성할 수 있지만 여전히 이전과 같이 약어 문제가 있으며 새로운 문제가 발생합니다.

• MacDonald와 같은 Mac에서 이름을 수정하기 위해 규칙을 추가하면 Macy와 같은 구분 이름이 MacY로 바뀝니다.

우리가 잘못 생각한 유일한 해결책은 DBS가 사용하는 것처럼 보이는 무차별 대입 법인 모든 문자를 대문자로 쓰는 것입니다.

따라서 프로세스를 자동화하려면 모든 단일 이름과 단어를 사전없이 사용하는 것이 불가능합니다. 어떻게해야 합니까? 사용자를 성가 시게하고 자신의 이름을 올바르게 입력하려는 사람들에게 다른 곳으로 이동하도록 유도합니다.


4

다음은 CSS를 사용하는 또 다른 솔루션입니다 (변환하려는 텍스트가 대문자 인 경우 자바 스크립트).

html

<span id='text'>JOHN SMITH</span>

js

var str = document.getElementById('text').innerHtml;
var return_text = str.toLowerCase();

CSS

#text{text-transform:capitalize;}

3

정규식이 두려운 사람 (lol) :

function titleCase(str)
{
    var words = str.split(" ");
    for ( var i = 0; i < words.length; i++ )
    {
        var j = words[i].charAt(0).toUpperCase();
        words[i] = j + words[i].substr(1);
    }
    return words.join(" ");
}


3

내 한 줄 솔루션 :

String.prototype.capitalizeWords = function() {
    return this.split(" ").map(function(ele){ return ele[0].toUpperCase() + ele.slice(1).toLowerCase();}).join(" ");
};

그런 다음 capitalizeWords()모든 문자열 에서 메소드 를 호출 할 수 있습니다 . 예를 들면 다음과 같습니다.

var myS = "this actually works!";
myS.capitalizeWords();

>>> This Actually Works

내 다른 해결책 :

function capitalizeFirstLetter(word) {
    return word[0].toUpperCase() + word.slice(1).toLowerCase();
}
String.prototype.capitalizeAllWords = function() {
    var arr = this.split(" ");
    for(var i = 0; i < arr.length; i++) {
        arr[i] = capitalizeFirstLetter(arr[i]);
    }
    return arr.join(" ");
};

그런 다음 capitalizeWords()모든 문자열 에서 메소드 를 호출 할 수 있습니다 . 예를 들면 다음과 같습니다.

var myStr = "this one works too!";
myStr.capitalizeWords();

>>> This One Works Too

Greg Dean의 답변을 기반으로 한 대체 솔루션 :

function capitalizeFirstLetter(word) {
    return word[0].toUpperCase() + word.slice(1).toLowerCase();
}
String.prototype.capitalizeWords = function() {
    return this.replace(/\w\S*/g, capitalizeFirstLetter);
};

그런 다음 capitalizeWords()모든 문자열 에서 메소드 를 호출 할 수 있습니다 . 예를 들면 다음과 같습니다.

var myString = "yes and no";
myString.capitalizeWords()

>>> Yes And No

3

나머지 매개 변수 사용에 대해 언급 한 사람이 없다는 사실에 놀랐습니다. 다음은 ES6 Rest 매개 변수를 사용하는 간단한 라이너입니다.

let str="john smith"
str=str.split(" ").map(([firstChar,...rest])=>firstChar.toUpperCase()+rest.join("").toLowerCase()).join(" ")
console.log(str)


2

이것은 FreeCodeCamp의 Bonfire "Title Case" 에 대한 내 솔루션을 기반으로 합니다. 먼저 주어진 문자열을 모두 소문자로 변환 한 다음 공백을 처리하는 모든 문자를 대문자로 변환해야합니다.

정규식을 사용하지 않고 :

function titleCase(str) {
 return str.toLowerCase().split(' ').map(function(val) { return val.replace(val[0], val[0].toUpperCase()); }).join(' ');
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.