使用 JavaScript 将字符串转换为标题大小写

IT技术 javascript title-case
2021-01-27 01:49:39

有没有一种简单的方法可以将字符串转换为标题大小写?例如john smith变成John Smith我不是在寻找像John Resig 的解决方案那样复杂的东西,只是(希望)某种单线或双线。

6个回答

尝试这个:

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>

/([^\W_]+[^\s-]*) */g解决了Jim-Bob问题,即:jim-bob --> Jim-Bob
2021-03-13 01:49:39
@martinCzerwi\w\S*也导致了Jim-bob我们这边的问题。使用\w*解决了这个问题。
2021-03-15 01:49:39
任何人都可以请解释一下,为什么\w\S*使用,代替\w+\w*为例子吗?我不知道,为什么您要包含除空格之外的任何内容,因此将Jim-Bob更改Jim-bob
2021-03-31 01:49:39
如果这jim-bob --> Jim-Bob是您的愿望,您可能应该这样做/\b\w+/g例子:str.replace(/\b\w+/g,function(s){return s.charAt(0).toUpperCase() + s.substr(1).toLowerCase();});
2021-03-31 01:49:39
\w\S*用于代替\w+or\w*这样的词Don't不会被修改为Don'T,但正如其他人指出的那样\w\S*会导致连字符词出现问题。
2021-04-08 01:49:39

如果 CSS 解决方案满足您的需求,您可以将text-transform CSS 样式应用于您的控件:

text-transform: capitalize;

要知道,这将改变:
hello worldHello World
HELLO WORLDHELLO WORLD(无变化)
emily-jane o'brienEmily-jane O'brien(不正确)
Maria von TrappMaria Von Trapp(不正确)

JS 在浏览器之外使用。
2021-03-22 01:49:39
@Akshar :小写规则将替换为标题大小写规则。由于 css 不修改源内容,因此效果是删除了小写规则(保留所有大写的源内容),然后应用 titlecase 规则(什么都不做)。
2021-03-31 01:49:39
问题是:“有没有一种简单的方法可以将字符串转换为标题大小写?” . 此答案不会转换字符串。这是一种应用于字符串之上的样式。
2021-03-31 01:49:39
-1. 这个 css 有效,但不像大多数人期望的那样工作,因为如果文本以全部大写开头,则没有效果。 webmasterworld.com/forum83/7506.htm
2021-04-06 01:49:39
+1 问题含糊不清,没有解释用例。也许他们想用 JS 转换字符串,但实际上 CSS 对他们来说效果更好,就像我的情况一样。
2021-04-06 01:49:39

一种更优雅的方式,适应 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();
我觉得“不要修改原生 JavaScript 对象”语句就像“永远不要使用 goto”或“eval 是邪恶的”一样。有很多情况是可以的。如果您可以完全控制您的项目,并且当然不打算将其作为库发布,那么我认为这种方法没有问题。
2021-03-16 01:49:39
请记住,如果你有他们的名字破折号用户都进去Jo-Ann Smith,这个代码将其转换为Jo-ann Smith(注意是小写aAnn)。
2021-03-30 01:49:39
@marco-fiset 因为它不适合其他人!当您有 2 个库都试图修改具有不兼容更改的本机 JavaScript 对象时,就会发生不好的事情。想象一下,如果 jQuery 和 Google Maps 都遵循这种设计模式,那么您不可能在同一页面上同时拥有两者。
2021-04-03 01:49:39
@daniellmb 一个很好的观点。为方法名称添加前缀应该有助于避免这种情况,因为这将使方法不可枚举。
2021-04-04 01:49:39
@daniellmb 为什么他不应该改变 String 原型?我认为这是一个很好的解决方案。想想 ruby​​ 开放类,向现有类添加函数是完全有效的,并且被广泛接受。
2021-04-09 01:49:39

这是我的版本,IMO 也很容易理解和优雅。

var str = "foo bar baz"

console.log(

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

)
// returns "Foo Bar Baz"

@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(' '); }
2021-03-21 01:49:39
这看起来是最快的解决方案:)
2021-03-25 01:49:39
或者,您可以小写映射中的子字符串: str.split(' ').map(i => i[0].toUpperCase() + i.substring(1).toLowerCase()).join(' ')
2021-04-01 01:49:39
我不同意打电话.toLowerCase()诸如“McDonald”之类的名称或诸如“ASAP”之类的首字母缩略词应保留其大写字符。如果有人确实传入了像“heLLO”这样的字符串,则应用程序不应假设大写字母不正确。
2021-04-01 01:49:39
如果str是单个字符,这将中断
2021-04-08 01:49:39

这是我的函数,它转换为标题大小写,但也将定义的首字母缩略词保留为大写,将次要单词保留为小写:

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:"
固定的。在第三行的正则表达式已经从改变/\w\S*/g/([^\W_]+[^\s-]*) */g每@ awashburn的评论上述解决这一问题。
2021-03-15 01:49:39
使用你的正则表达式模式是否有优势/\b\w+/g,我发现它更容易理解?
2021-03-21 01:49:39
我看不出来,我只是采纳了另一位评论者的建议来解决连字符问题;但是您的正则表达式似乎也一样,而且简单总是更好。对于这篇文章的后代和未来的访问者,我只是根据@Michael的评论将第三行中的正则表达式从/([^\W_]+[^\s-]*) */g更改/\b\w+/g为 ;如果您发现需要更复杂的正则表达式的情况,请发表评论。
2021-03-28 01:49:39
我将第 3 行正则表达式更改/\b[\w-\']+/g为以允许单词中的连字符和撇号。
2021-03-29 01:49:39
我喜欢你的,我在处理罗马数字时也遇到了问题……只是用 I、II、III、IV 等修补了它。
2021-04-01 01:49:39