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

IT技术 javascript string title-case
2021-02-03 16:55:33

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

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

6个回答

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

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 这只会导致每个单词一个字母。
2021-03-19 16:55:33
在 es6 中,你可以这样做,看起来更好一些: myStr.toLowerCase().split(' ').map(word => word.charAt(0).toUpperCase() + word.substring(1)).join(' ');
2021-03-21 16:55:33
@PatrickMichaelsen 确实可以。不过我不会改变答案,它是从 2015 年开始的,我知道时代已经改变,但我会为后代保留它。另外,我也不会再这样写了 :) 但是我猜可以随意发布您的答案作为您自己的答案吗?
2021-03-25 16:55:33
是的,我同意,目前的答案很好。这就是为什么我把它放在评论中,仅供新访客参考。
2021-04-06 16:55:33
我针对 3 个竞争对手的函数运行了此函数的基准测试,发现它的性能最高 - 不到最差竞争对手(Chrome 73)执行时间的 1/3。jsben.ch/AkHgP
2021-04-08 16:55:33

你让复杂变得很容易。你可以在你的 CSS 中添加这个:

.capitalize {
    text-transform: capitalize;
}

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

 document.getElementById("element").className = "capitalize";
这是“仅显示”更改,字符串本身没有更改。有没有理由屁股UME的预期输出是一个HTML元素-有没有迹象表明该问题的代码是即使在浏览器!
2021-03-21 16:55:33
是的,它真的是多才多艺
2021-03-22 16:55:33
不幸的是,在某些情况下,如果值是 20 毫米,而您使用大写字母,它将是 20 毫米。在某些情况下,javascript 可能是唯一的方法。
2021-03-28 16:55:33
感谢您的回复,但我正在尝试使用 javascript 来练习@MarcosPérezGude
2021-04-01 16:55:33
正如其他人所说,问题不是如何显示大写文本,而是“将字符串转换为标题大小写”
2021-04-06 16:55:33

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

在这种情况下,您将所有非单空格“”转换为单空格“”
2021-04-01 16:55:33
我也认为你一开始就遗漏toLowerCase()了,以防万一用户或字符串是大小写混合的。
2021-04-05 16:55:33

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

var str = text.toLowerCase().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 函数,所以;用大写匹配替换匹配
它不像şalk这样的大写单词
2021-03-21 16:55:33
如果输入全部为大写,则什么都不做
2021-03-21 16:55:33
为什么\s{1}我想说\s+,所以即使单词之间有几个空格它也能工作
2021-03-26 16:55:33
就我而言;它正好是 1 个空格,是的;它应该工作!
2021-03-28 16:55:33
字符串是不可变的。正则表达式将在幕后分裂和加入。实际上没有办法绕过它。
2021-04-10 16:55:33

最短的一个班轮(也非常快):

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

用法示例:

// Create a reusable function:
const toTitleCase = str => str.replace(/(^\w|\s\w)/g, m => m.toUpperCase());

// Call the function:
const myStringInTitleCase = toTitleCase(myString);
这太棒了!正则表达式是最好的。你能详细说明这部分的作用吗?m => m.toUpperCase()
2021-03-16 16:55:33
@marcin2x4m匹配第一个字符,因此它使第一个字符大写。
2021-03-20 16:55:33
它不像şalk这样的大写单词
2021-03-27 16:55:33
这个解决方案也保留了单词之间的空格 Input -> hello-----world $$$ 其他解决方案 -> Hello-World $$$ 这个解决方案 -> Hello-----World
2021-03-29 16:55:33
@AbsoluteBeginner 你需要用像 toLocaleUpperCase 和 toLocaleLowerCase 这样的区域敏感函数替换 toUpperCase 和 toLowerCase
2021-04-07 16:55:33