大写字符串中的单词


181

将字符串中的单词大写的最佳方法是什么?


66
如果用于显示,请使用CSS。text-transform:capitalize;
kennytm 2010年

3
这用于将“ title”属性设置为DOM元素。没有CSS :)
vsync

1
另外,尽管我知道解决方案,但我还是问了这个问题,只是因为我试图在此网站上寻找它,却找不到合适的解决方案,因此出于文档目的添加了它。
vsync 2010年

1
@KennyTM:text-transform不会真正大写形式的fieds的值,所有值都将大写,而是直接发送给服务器。
Marco Demaio 2011年

8
@Marco:是的,这就是为什么我说“如果用于显示”的原因。
kennytm 2011年

Answers:


286
/**
 * Capitalizes first letters of words in string.
 * @param {string} str String to be modified
 * @param {boolean=false} lower Whether all other letters should be lowercased
 * @return {string}
 * @usage
 *   capitalize('fix this string');     // -> 'Fix This String'
 *   capitalize('javaSCrIPT');          // -> 'JavaSCrIPT'
 *   capitalize('javaSCrIPT', true);    // -> 'Javascript'
 */
const capitalize = (str, lower = false) =>
  (lower ? str.toLowerCase() : str).replace(/(?:^|\s|["'([{])+\S/g, match => match.toUpperCase());
;

  • 修复了Marco Demaio的解决方案,即第一个字母前面没有大写字母。
capitalize(' javascript'); // -> ' Javascript'
  • 可以处理国家符号和带重音的字母。
capitalize('бабушка курит трубку');  // -> 'Бабушка Курит Трубку'
capitalize('località àtilacol')      // -> 'Località Àtilacol'
  • 可以处理引号和花括号。
capitalize(`"quotes" 'and' (braces) {braces} [braces]`);  // -> "Quotes" 'And' (Braces) {Braces} [Braces]

4
regexp的工作方式类似于“将所有非空白字符(\ S)放在字符串的
开头

3
对大写字符串进行了一些增强:) ** String.prototype.capitalize = function(){返回this.toLowerCase()。replace(/(?:^ | \ s)\ S / g,function(a) {return a.toUpperCase();}); }; **
SuryaPavan 2014年

1
请不要更改现有对象的原型。
Ascherer

1
@ Dr.X,请参阅附件'CHECK THIS OUT'.capitalize(true) -> "Check This Out"。思维true参数。
凌晨

1
@ SeaWarrior404,您是对的,使用es6语法更新了我的答案,添加了jsdoc和一些标点符号处理

214

使用ES6的箭头功能,最短的将字符串中的单词大写的实现如下:

'your string'.replace(/\b\w/g, l => l.toUpperCase())
// => 'Your String'

与ES5兼容的实现:

'your string'.replace(/\b\w/g, function(l){ return l.toUpperCase() })
// => 'Your String'

正则表达式基本上匹配给定字符串中每个单词的首字母,并将该字母仅转换为大写:

  • \ b匹配单词边界(单词的开头或结尾);
  • \ w匹配以下元字符[a-zA-Z0-9]。

对于非ASCII字符,请参考此解决方案

'ÿöur striñg'.replace(/(^|\s)\S/g, l => l.toUpperCase())

此正则表达式匹配给定字符串中的第一个字母和每个非空白字母,后跟空白,并将该字母仅转换为大写:

  • \ s匹配空格字符
  • \ S匹配非空格字符
  • (x | y)匹配任何指定的替代项

/(?:^|\s)\S/g尽管g我们的正则表达式中的标记无论如何都不会捕获子组,但在这里可以按如下方式使用非捕获组。

干杯!


1
您能否在答案中解释正则表达式的工作原理?(每块的含义)
vsync

2
如果解释在里面,我将选择它作为答案,而不是一个评论可能会错过的评论。
vsync

2
这似乎不适用于北欧字符ä,ö和å。例如päijät-häme成为PäIjäT-HäMe
Markus Meskanen

1
对于包含变音符号/非拉丁字符的国际内容,此解决方案不是一个很好的解决方案。EisbäRen例如,这是一个结果。
Daniel B.

3
@MarkusMeskanen中的示例应更改为Päijät-Häme,但至少在Chrome空白中不包含破折号(-),因此名称的第二部分未大写。可以固定为/(^|\s|-)\S/g
MiRin

32
function capitalize(s){
    return s.toLowerCase().replace( /\b./g, function(a){ return a.toUpperCase(); } );
};

capitalize('this IS THE wOrst string eVeR');

输出:“这是有史以来最糟糕的字符串”

更新:

看来此解决方案取代了我的解决方案:https : //stackoverflow.com/a/7592235/104380


请注意,您的函数似乎也错误地将重音字母大写,请参阅我的答案:stackoverflow.com/questions/2332811/capitalize-words-in-string / ...我也对它进行了原型化。
Marco Demaio 2011年

9
我不喜欢原型,它有可能产生碰撞,因为其他人也使用相同的名称来原型String。
vsync

15

通过VSYNC提供答案的工作,只要你没有重音字母输入字符串。

我不知道原因,但显然\b在regexp匹配中也加了重音字母(在IE8和Chrome上测试),因此,像这样的字符串"località"会被大写错误地转换成"LocalitÀ"(该à字母被大写,因为regexp认为这是单词边界)

这个也可以用于重音字母的更通用的功能是:

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

您可以像这样使用它:

alert( "hello località".toCapitalize() );

1
" javascript".toCapitalize() -> " javascript"
2011年

2
对于可能引起关注的人:dis贬不一的答案stackoverflow.com/questions/2332811/capitalize-words-in-string / ...现在是这里的最佳答案。
Marco Demaio

4

由于每个人都为您提供了您所要求的JavaScript答案,因此我将介绍CSS属性text-transform: capitalize将完全做到这一点。

我意识到这可能不是您要的-您没有给我们提供运行此操作的上下文-但是,如果仅出于演示目的,我肯定会选择CSS替代品。


KennyTM击败了您。检查他对问题部分的评论。:-)
Buhake Sindi

是的,我知道这个CSS属性,但是对于dom元素的title属性,我需要这个属性,而且您可能知道,它没有CSS。
vsync

4

jQuery的John Resig将由John Gruber编写的perl脚本移植到JavaScript。该脚本以更智能的方式大写,例如,不大写“ of”和“ and”之类的小写字母。

您可以在这里找到它:JavaScript中的标题大写


4

使用JavaScript和html

String.prototype.capitalize = function() {
  return this.replace(/(^|\s)([a-z])/g, function(m, p1, p2) {
    return p1 + p2.toUpperCase();
  });
};
<form name="form1" method="post">
  <input name="instring" type="text" value="this is the text string" size="30">
  <input type="button" name="Capitalize" value="Capitalize >>" onclick="form1.outstring.value=form1.instring.value.capitalize();">
  <input name="outstring" type="text" value="" size="30">
</form>

基本上,您可以这样做,string.capitalize()并且每个单词的第一个字母都会大写。

来源:http//www.mediacollege.com/internet/javascript/text/case-capitalize.html


1
我不喜欢这种方式的原型,因为我的脚本有时是在其他网站上的第三方嵌入,并且可能会导致混乱与“ String”之类的全局对象...所以我宁愿对其进行“ fucntion”。
vsync 2010年

1
那就是原型的美(不是您下载的原型)。它是javascript中的标准功能,可在所有浏览器中使用。
Buhake Sindi

我怀疑如果其他人已经原型化了自己的String.prototype.capitalize,这可能会引起问题,而我会不小心覆盖它。
vsync

1
@vsync,您始终可以通过执行此操作进行检查。if (object.capitalize) {...} else {String.prototype.capitalize = function()....}对象是类型的String。所以,这真的很简单。
Buhake Sindi

4

Ivo的回答很好,但是我更喜欢不匹配,\w因为不需要大写0-9和AZ。我们可以忽略这些,仅在az上匹配。

'your string'.replace(/\b[a-z]/g, match => match.toUpperCase())
// => 'Your String'

这是相同的输出,但是我认为在自记录代码方面更加清晰。


对于非英语字母:,这将失败"Är Toaletten"。在提供了很好的回答之后,您的回答没有提供讨论
。.– vsync

@vsync似乎很苛刻。这是对已接受答案的优化。/\b\w/g对于非英文字母也失败。并非每个人都处理unicode字符,这将帮助那些不需要的人。
Big Money

1
好吧..我只是不认为您应该使用它而不是最重要的答案,因为您不需要英语以外的任何其他语言。这不是一个充分的理由,因为对所有ASCII字符执行此操作不会受到任何惩罚,就像在首要问题中所说的那样
vsync

3

如果您使用lodash在你的JavaScript应用程序,你可以使用_.capitalize

console.log( _.capitalize('ÿöur striñg') );
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>


3

简洁的ES6方法可能看起来像这样。

const capitalizeFirstLetter = s => s.charAt(0).toUpperCase() + s.slice(1)

这只会大写第一个字母,不会影响句子其余部分的大小写。


1

这应该涵盖大多数基本用例。

const capitalize = (str) => {
    if (typeof str !== 'string') {
      throw Error('Feed me string')
    } else if (!str) {
      return ''
    } else {
      return str
        .split(' ')
        .map(s => {
            if (s.length == 1 ) {
                return s.toUpperCase()
            } else {
                const firstLetter = s.split('')[0].toUpperCase()
                const restOfStr = s.substr(1, s.length).toLowerCase()
                return firstLetter + restOfStr
            }     
        })
        .join(' ')
    }
}


capitalize('THIS IS A BOOK') // => This Is A Book
capitalize('this is a book') // => This Is A Book
capitalize('a 2nd 5 hour boOk thIs weEk') // => A 2nd 5 Hour Book This Week

编辑:改进了映射的可读性。


您能否解释一下为什么您认为自己的答案比许多年前更好?
vsync

您能解释一下为什么您认为我的意思是我的答案是最好的(或更好)吗?我没有提到,只是有所不同。另外,我也没有看到您在其他帖子上留下此评论,所以我真的不明白。但是对于初学者来说:它使用了现代js功能(解构,粗箭头,隐式返回),它不使用regx,并且是解决问题的更实用的方法。它还具有非常基本的错误处理,如果将其传递给一个字符串,则返回空字符串(对我来说很重要)。
下降

可以有所不同,但是它必须更好或等于其他答案,而且似乎是……无法读取,当然也不会在生产代码中放任何东西,因为没人能理解它
vsync

嗯,好,那么您实际将在生产中使用的哪个Monkeypatch String的解决方案占50%?还是令人费解的正则表达式?这些更容易推理,对吗?恕我直言绝对不是!还说没有人会理解这是相当主观的声明。也为此,您说这是一段代码(更多功能,但事实并非如此)。如何将其切碎,而我的解决方案却没人能理解?您不可能在不浪费时间的情况下解开这些正则表达式。
下降

该代码是由Resig先生亲自编写的,不应受到质疑。另一方面,由于您的匿名性,您缺乏信誉。无论如何,Regex解决方案更短,运行速度更快,并且对Regex基础知识了解的任何人都可以轻松阅读。几乎没有什么可以“解开”的:/\b\w/g...
vsync

1

该解决方案不使用正则表达式,支持带重音符号的字符,并且几乎每个浏览器都支持该解决方案。

function capitalizeIt(str) {
    if (str && typeof(str) === "string") {
        str = str.split(" ");    
        for (var i = 0, x = str.length; i < x; i++) {
            if (str[i]) {
                str[i] = str[i][0].toUpperCase() + str[i].substr(1);
            }
        }
        return str.join(" ");
    } else {
        return str;
    }
}    

用法:

console.log(capitalizeIt('çaoJava程序内部的第二个'));

输出:

Çao第二个内部Javascript程序


1
这样会消耗大量的CPU资源。JavaScript不会更改原始值,这意味着每次执行操作都会创建一个新值。这就像“替换”,exempli特惠更好地利用本地函数。
丹尼尔·班代拉

1

我的解决方案:

String.prototype.toCapital = function () {
    return this.toLowerCase().split(' ').map(function (i) {
        if (i.length > 2) {
            return i.charAt(0).toUpperCase() + i.substr(1);
        }

        return i;
    }).join(' ');
};

例:

'álL riGht'.toCapital();
// Returns 'Áll Right'

尝试几种方法,您的解决方案是最有效的,并且尊重jsbench.me/urjeu9wvql
nasatome

这不起作用:'a áAA. bb . bbb .cc .d'.toCapital();=>a Áaa. bb . Bbb .cc .d
vsync

我不考虑少于2个字母的单词,例如“ of”,“ as”。
Erick Tatsui

0

http://www.mediacollege.com/internet/javascript/text/case-capitalize.html是许多答案之一。

Google可以解决这些问题。

幼稚的方法是用空格分割字符串,将结果数组的每个元素的首字母大写并将其重新连接在一起。这就使现有的大写字母单独存在(例如,HTML保留HTML,不会像Html那样变得愚蠢)。如果您不希望这样,请在拆分之前将整个字符串变成小写。


0

该代码在点后大写单词:

function capitalizeAfterPeriod(input) { 
    var text = '';
    var str = $(input).val();
    text = convert(str.toLowerCase().split('. ')).join('. ');
    var textoFormatado = convert(text.split('.')).join('.');
    $(input).val(textoFormatado);
}

function convert(str) {
   for(var i = 0; i < str.length; i++){
      str[i] = str[i].split('');
      if (str[i][0] !== undefined) {
         str[i][0] = str[i][0].toUpperCase();
      }
      str[i] = str[i].join('');
   }
   return str;
}

0

我喜欢简单的过程。首先将字符串更改为Array以便于迭代,然后使用map函数根据需要更改每个单词。

function capitalizeCase(str) {
    var arr = str.split(' ');
    var t;
    var newt;
    var newarr = arr.map(function(d){
        t = d.split('');
        newt = t.map(function(d, i){
                  if(i === 0) {
                     return d.toUpperCase();
                    }
                 return d.toLowerCase();
               });
        return newt.join('');
      });
    var s = newarr.join(' ');
    return s;
  }

0

jQuery或Javascipt没有提供实现此目的的内置方法。

CSS测试转换(text-transform:capitalize;)并未真正大写字符串的数据,而是在屏幕上显示了大写的呈现。

如果您正在寻找使用普通vanillaJS在数据级别实现此目标的更合法方法,请使用此解决方案=>

var capitalizeString = function (word) {    
    word = word.toLowerCase();
    if (word.indexOf(" ") != -1) { // passed param contains 1 + words
        word = word.replace(/\s/g, "--");
        var result = $.camelCase("-" + word);
        return result.replace(/-/g, " ");
    } else {
    return $.camelCase("-" + word);
    }
}

0

用这个:

String.prototype.toTitleCase = function() {
  return this.charAt(0).toUpperCase() + this.slice(1);
}

let str = 'text';
document.querySelector('#demo').innerText = str.toTitleCase();
<div class = "app">
  <p id = "demo"></p>
</div>


0

您可以使用以下命令将字符串中的单词大写:

function capitalizeAll(str){

    var partes = str.split(' ');

    var nuevoStr = ""; 

    for(i=0; i<partes.length; i++){
    nuevoStr += " "+partes[i].toLowerCase().replace(/\b\w/g, l => l.toUpperCase()).trim(); 
    }    

    return nuevoStr;

}

0

还有locutus:https ://locutus.io/php/strings/ucwords/以这种方式定义它:

function ucwords(str) {
  //  discuss at: http://locutus.io/php/ucwords/
  // original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
  // improved by: Waldo Malqui Silva (http://waldo.malqui.info)
  // improved by: Robin
  // improved by: Kevin van Zonneveld (http://kvz.io)
  // bugfixed by: Onno Marsman (https://twitter.com/onnomarsman)
  // bugfixed by: Cetvertacov Alexandr (https://github.com/cetver)
  //    input by: James (http://www.james-bell.co.uk/)
  //   example 1: ucwords('kevin van  zonneveld')
  //   returns 1: 'Kevin Van  Zonneveld'
  //   example 2: ucwords('HELLO WORLD')
  //   returns 2: 'HELLO WORLD'
  //   example 3: ucwords('у мэри был маленький ягненок и она его очень любила')
  //   returns 3: 'У Мэри Был Маленький Ягненок И Она Его Очень Любила'
  //   example 4: ucwords('τάχιστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός')
  //   returns 4: 'Τάχιστη Αλώπηξ Βαφής Ψημένη Γη, Δρασκελίζει Υπέρ Νωθρού Κυνός'

  return (str + '').replace(/^(.)|\s+(.)/g, function ($1) {
    return $1.toUpperCase();
  });
};

0

我将为此使用正则表达式:

myString = '  this Is my sTring.  ';
myString.trim().toLowerCase().replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())));
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.