216

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

4

21 回答 21

318
/**
 * 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]
于 2011-09-29T03:47:52.100 回答
258

使用 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我们的正则表达式中的标志无论如何都不会按设计捕获子组,但此处可以按如下方式使用非捕获组。

干杯!

于 2016-07-22T15:31:12.810 回答
38
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

于 2010-02-25T09:13:35.977 回答
16

只要输入字符串中没有重音字母, vsync 提供的答案就可以工作。

我不知道原因,但显然\bin 正则表达式也匹配重音字母(在 IE8 和 Chrome 上测试),所以像这样的字符串"località"会被错误地大写转换为"LocalitÀ"à字母被大写,因为正则表达式认为它是一个单词边界)

一个更通用的函数也适用于重音字母

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

你可以像这样使用它:

alert( "hello località".toCapitalize() );
于 2011-04-15T15:03:05.493 回答
9

一个简单、直接(非正则表达式)的解决方案:

const capitalizeFirstLetter = s => 
  s.split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ')
  1. 将字符串分解为单词数组(按空格分隔符)
  2. 将每个单词拆分为第一个字符 + 单词中的其余字符
  3. 第一个字母转换为大写,其余保持原样
  4. 将 Array 连接回带空格的字符串
于 2019-01-16T18:08:56.923 回答
7

Ivo 的回答很好,但我更喜欢不匹配,\w因为没有必要将 0-9 和 AZ 大写。我们可以忽略这些,只匹配 az。

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

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

于 2019-02-25T08:14:02.073 回答
5

既然每个人都给了你所要求的 JavaScript 答案,我会指出 CSS 属性text-transform: capitalize将完全做到这一点。

我意识到这可能不是你所要求的——你没有给我们任何运行它的上下文——但如果它只是为了演示,我肯定会选择 CSS 替代方案。

于 2010-02-25T09:18:45.773 回答
4

John Resig(以 jQuery 闻名)将一个由 John Gruber 编写的 perl 脚本移植到 JavaScript。这个脚本以更智能的方式大写,它不会大写诸如“of”和“and”之类的小词。

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

于 2010-02-25T10:27:49.430 回答
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

于 2010-02-25T09:18:09.520 回答
4

我的解决方案:

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'
于 2017-03-13T19:06:45.943 回答
3

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

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

于 2018-03-20T12:45:06.987 回答
2

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

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

编辑:提高了映射的可读性。

于 2018-08-30T02:06:54.643 回答
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('çao 2nd inside Javascript program'));

输出:

Çao 2nd Inside Javascript 程序

于 2019-02-12T10:17:46.260 回答
0

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

谷歌可以解决这些问题。

一种天真的方法是用空格分割字符串,将结果数组的每个元素的第一个字母大写,然后将其重新连接在一起。这留下了现有的大写形式(例如,HTML 保持 HTML 不变,不会变成像 Html 那样愚蠢的东西)。如果您不想要这种影响,请在拆分之前将整个字符串转换为小写。

于 2010-02-25T09:14:29.923 回答
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;

}
于 2018-09-24T20:13:03.427 回答
0

我会为此目的使用正则表达式:

myString = '  this Is my sTring.  ';
myString.trim().toLowerCase().replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())));
于 2020-06-24T12:55:24.457 回答
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();
  });
};
于 2020-04-23T10:30:27.193 回答
0

我喜欢简单的过程。首先将字符串更改为数组以便于迭代,然后使用 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;
  }
于 2017-05-09T08:39:50.457 回答
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;
}
于 2016-08-23T15:02:39.880 回答
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>

于 2018-04-10T09:07:31.993 回答
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);
    }
}
于 2017-07-24T17:39:08.147 回答