如何使用JavaScript将字符串中每个单词的首字母大写?


116

我正在尝试编写一个函数,该函数将字符串中每个单词的首字母大写(将字符串转换为标题大小写)。

例如,当输入为时"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"));


看起来不像是将字符串的首字母大写。或者您是说要大写字符串中包含的每个单词。
epascarello 2015年

2
你是不是assigining你的资本,以你的结果,splitStr[i].charAt(0).toUpperCase();是要void。您需要做splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);
做某事

1
您应该先告诉我们。什么错的功能?预期结果是什么,它返回什么?
塞巴斯蒂安·西蒙

该函数看起来像试图将每个单词的首字母大写。
Halcyon 2015年

3
就像标题所说的那样,我试图将字符串中每个单词的首字母大写。我不喜欢在本质上应该是支持性的论坛上的低票或否定性。@somethinghere-感谢您的回复。
slurrr

Answers:


164

您不会再将更改分配给阵列,因此所有的努力都是徒劳的。尝试这个:

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


@Halcyon每个单词只产生一个字母。
epascarello 2015年

14
在es6中,您可以执行以下操作,效果看起来更好:myStr.toLowerCase().split(' ').map(word => word.charAt(0).toUpperCase() + word.substring(1)).join(' ');
Patrick Michaelsen

1
@PatrickMichaelsen确实可以。不过,我不会更改答案,从2015年开始,我知道时代已经改变,但我会继续为后代保留。另外,我也不会再这样写了:)但是我想随意发表您自己的答案吗?
somethinghere

1
是的,我同意,当前答案很好。这就是为什么我将其放在评论中,仅供新访客参考。
Patrick Michaelsen

1
我针对3个竞争对手的功能对该功能进行了基准测试,发现它是性能最高的-不到最差的竞争对手(Chrome 73)的执行时间的1/3。jsben.ch/AkHgP
Michael Thompson

92

您使复杂变得非常容易。您可以在CSS中添加此代码:

.capitalize {
    text-transform: capitalize;
}

在JavaScript中,您可以将类添加到元素中

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

@epascarello我不懂你,你在告诉我什么?
MarcosPérezGude 2015年

问题是“此功能有什么问题?”,否则这将是stackoverflow.com/questions/1026069/…stackoverflow.com/questions/196972/…的
Hacketo 2015年

1
感谢您的答复,但我想练习@MarcosPérezGude做到这一点使用JavaScript
slurrr

1
是的,它真正的用途广泛
MarcosPérezGude

3
不幸的是,在某些情况下,如果值是20mm,而您使用大写字母,它将是20Mm。在某些情况下,javascript可能是唯一的方法。
Buts

79

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


1
我还认为,toLowerCase()一开始您就丢失了,以防万一用户或字符串混合使用。
ArchNoob

45

我认为这种方式应该更快。因为它不会拆分字符串并再次加入它;只使用正则表达式。

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

说明

  1. (^\w{1}):匹配字符串的第一个字符
  2. |: 要么
  3. (\s{1}\w{1}):匹配一个空格后的一个字符
  4. g:全部匹配
  5. match => match.toUpperCase():替换为can take function,所以;用大写替换替换匹配

1
好干净!
悬崖厅

为什么\s{1}呢 我会说\s+,所以它与字之间的多个空格的作品甚至
克里斯蒂安Traìna

就我而言 恰好是1个空格,是的;它应该工作!
nimeresam,

字符串是不可变的。正则表达式将在引擎盖下拆分和合并。实际上没有办法解决。
bluegrounds

24

如果您可以使用第三方库,那么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>


19

在ECMAScript 6中,使用箭头功能的单行答案:

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

3
真好!您可以w[0]用来使其更短。与正则表达式不同,它可以通过ANY符号轻松扩展,而不仅仅是space。我的意思是( [ ",因为字母也应在这些符号后大写。因此,感谢您的解决方案!
Systems Rebooter

17

最短一线(也非常快):

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

好厉害!正则表达式是最好的。您能否进一步说明这部分的作用?m => m.toUpperCase()
marcin2x4

1
@ marcin2x4m匹配第一个字符,因此它使第一个字符大写。

12

ECMAScript 6版本:

title
    .split(/ /g).map(word =>
        `${word.substring(0,1).toUpperCase()}${word.substring(1)}`)
    .join(" ");

6
我现在才看到它,而且非常整洁,但是我认为您需要使用a" "代替"",否则您将得到一个大字,不是吗?
somethinghere

9

𝗟𝗮𝘁𝗶𝗻𝗟𝗮𝘁𝗶𝗻-𝗜

您可以简单地使用正则表达式函数来更改每个字母的大写。通过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>


您忘了在函数中添加return,方法如下:function autoCaps(string){return string.replace(/ \ b [az] | \ B [AZ] / g,function(x){return String.fromCharCode(x.charCodeAt (0)^ 32);}); }
Archy

@Archy谢谢您的纠正。我已经做出了您建议的更改。
杰克·吉芬


6

也是一个不错的选择(特别是如果您使用的是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(" ");
}

5

此例程将处理带连字符的单词和带撇号的单词。

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");
// returns "Pat O'Neil's";


4

let cap = (str) => {
  let arr = str.split(' ');
  arr.forEach(function(item, index) {
    arr[index] = item.replace(item[0], item[0].toUpperCase());
  });

  return arr.join(' ');
};

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

快速阅读版本,请参见基准http://jsben.ch/k3JVz 在此处输入图片说明


4

ES6语法

const captilizeAllWords = (sentence) => {
  if (typeof sentence !== "string") return sentence;
  return sentence.split(' ')
    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ');
}


captilizeAllWords('Something is going on here')

难道不应该将word.slice(1)替换为word.slice(1).toLowerCase()以确保其余部分均不大写(以防万一,原句中的内容)?
安东·克鲁格

4

您可以使用现代的JS语法,这可以使您的生活更加轻松。这是给定问题的代码片段:

const capitalizeString = string => string.split(' ').map(item => item.replace(item.charAt(0), item.charAt(0).toUpperCase())).join(' ');
capitalizeString('Hi! i am aditya shrivastwa')


3

由于可读性,我通常不喜欢使用regexp,而且我尽量避免循环。我认为这是可读的。

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

3

除了试图将所有单词的所有首字母(即通过regex定义\w+)转换为大写外,下面的函数不会更改字符串的任何其他部分。

这意味着它没有必要转换的话首字母大写,但不正是问题的标题说:“大写的第一个字母每个字在字符串-的JavaScript”

  • 不要分割字符串
  • 确定每个由正则表达式\w+,它等效于[A-Za-z0-9_]+
    • String.prototype.toUpperCase()仅将功能应用于每个单词的第一个字符。
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:如果您想要实际的Titlecase(即仅首字母大写,所有其他小写):

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

3
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(' ');
}

1
在您的答案中添加一些评论。
HDJEMAI

3

或者可以使用replace()来完成,并将每个单词的第一个字母替换为其“ 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");

2

这是您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"));


2

下面是另一种大写字符串中每个单词的第一个字母的方法。

通过使用为String对象创建一个自定义方法prototype

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

1

@somethingthere提出的解决方案的更紧凑(更现代)的重写:

let titleCase = (str => str.toLowerCase().split(' ').map(
                c => c.charAt(0).toUpperCase() + c.substring(1)).join(' '));
    
document.write(titleCase("I'm an even smaller tea pot"));


1

原始代码:

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('JavaScript string exasd');

您应该提供更多详细信息(出了什么问题?)
Hering

1

我使用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

完整而简单的解决方案在这里:

String.prototype.replaceAt=function(index, replacement) {
        return this.substr(0, index) + replacement+ this.substr(index
  + replacement.length);
}
var str = 'k j g           u              i l  p';
function capitalizeAndRemoveMoreThanOneSpaceInAString() {
    for(let i  = 0; i < str.length-1; i++) {
        if(str[i] === ' ' && str[i+1] !== '')
            str = str.replaceAt(i+1, str[i+1].toUpperCase());
    }
    return str.replaceAt(0, str[0].toUpperCase()).replace(/\s+/g, ' ');
}
console.log(capitalizeAndRemoveMoreThanOneSpaceInAString(str));

为什么每次调用此方法时都要修改String.prototype?如果有任何需要,您只需做一次,并且最好不要接触内置的原型。这是一个有点没有没有...
somethinghere

1
let str = "I'm a little tea pot";

str = str.toLowerCase();

并将css属性添加text-transform: capitalize;到相应的元素。


0

请检查下面的代码。

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

2
感谢您提供此代码段,它可能会提供一些有限的即时帮助。通过说明为什么这是解决问题的好方法,适当的解释将大大提高其长期价值,对于其他存在类似问题的读者来说,这样做将更为有用。请编辑您的答案以添加一些解释,包括您所做的假设。
iBug

0

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

说明:
1.首先,我们将字符串“ test test test”传递给函数“ titleCase”。
2.我们以空间为单位分割字符串,因此第一个函数“ split”的结果将为[“ test”,“ test”,“ test”]]
3.当我们得到一个数组时,我们使用map函数来操作每个单词在数组中。我们将第一个字符大写,并在其中添加剩余字符。
4.最后,当我们用sapce分割字符串时,我们使用空格连接数组。


我认为您在分裂之前一开始就缺少某些东西,那就是toLowerCase()
ArchNoob

@ArchNoob,是的,我们可以在拆分之前添加到LowerCase()。但是它完全取决于用例,例如我们是否希望将“ TeSt Test”输出用作“ teSt test”输入,在这种情况下,我们无法添加toLowerCase()。
Pulkit Aggarwal

0

function titleCase(str) {
  //First of all, lets make all the characters lower case
  let lowerCaseString = "";
  for (let i = 0; i < str.length; i++) {
    lowerCaseString = lowerCaseString + str[i].toLowerCase();
  }
  //Now lets make the first character in the string and the character after the empty character upper case and leave therest as it is
  let i = 0;
  let upperCaseString = "";
  while (i < lowerCaseString.length) {
    if (i == 0) {
      upperCaseString = upperCaseString + lowerCaseString[i].toUpperCase();
    } else if (lowerCaseString[i - 1] == " ") {
      upperCaseString = upperCaseString + lowerCaseString[i].toUpperCase();
    } else {
      upperCaseString = upperCaseString + lowerCaseString[i];
    }
    i = i + 1;
  }
  console.log(upperCaseString);

  return upperCaseString;
}

titleCase("hello woRLD");

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.