【问题标题】:Capitalize words in string [duplicate]将字符串中的单词大写[重复]
【发布时间】:2010-02-25 09:12:13
【问题描述】:

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

【问题讨论】:

  • 如果是为了显示,使用CSS。 text-transform:capitalize;.
  • 这是用来给DOM元素设置“title”属性的。没有 CSS :)
  • 另外,我已经问过这个问题,虽然我知道解决方案,只是因为我尝试在这个网站上寻找它并且找不到合适的解决方案,所以为了文档而添加它.
  • @KennyTM:文本转换不会真正将表单的字段值大写,所有值都会大写,但会按原样发送到服务器。
  • @Marco:是的,这就是为什么我说“如果是为了展示”。

标签: javascript string capitalization


【解决方案1】:
/**
 * 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]

【讨论】:

  • 正则表达式的工作方式类似于“将所有非空白字符 (\S) 放在字符串 (^) 的开头或任何空白字符 (\s) 之后并将它们大写”
  • 处理大写字符串的一点改进:) ** String.prototype.capitalize = function() { return this.toLowerCase().replace(/(?:^|\s)\ S/g, function(a) { return a.toUpperCase(); }); }; **
  • 请不要更改现有对象的原型。
  • @Dr.X,请参阅附加组件,'CHECK THIS OUT'.capitalize(true) -> "Check This Out"。注意true参数。
  • @SeaWarrior404,你是对的,用 es6 语法更新了我的答案,添加了 jsdoc 和一些标点符号处理
【解决方案2】:

使用 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) 匹配任何指定的替代项

尽管我们的正则表达式中的g 标志无论如何都不会按设计捕获子组,但此处可以使用如下非捕获组/(?:^|\s)\S/g

干杯!

【讨论】:

  • 您能否在答案中解释正则表达式的工作原理? (每一段的意思)
  • 如果解释在其中,我会选择它作为答案,而不是作为可能错过的评论。
  • 这似乎不适用于北欧字符 ä、ö 和 å。例如 päijät-häme 变为 PäIjäT-HäMe
  • 此解决方案不适用于包含变音符号/非拉丁字符的国际内容。例如,EisbäRen 是一个结果。
  • @MarkusMeskanen 中的示例应更改为Päijät-Häme,但至少在 Chrome 空格中不包含破折号 (-),因此名称的第二部分没有大写。可以固定为/(^|\s|-)\S/g
【解决方案3】:
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

【讨论】:

【解决方案4】:

answer provided by vsync只要输入字符串中没有重音字母就可以工作。

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

也适用于重音字母的更通用的功能是:

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

你可以这样使用它:

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

【讨论】:

【解决方案5】:

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

const capitalizeFirstLetter = s => 
  s.split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ')
  1. 将字符串分解为单词数组(通过空格分隔符)
  2. 将每个单词分解为单词中的第一个字符 + 其余字符
  3. 第一个字母转换为大写,其余保持原样
  4. 将数组重新连接成带空格的字符串

【讨论】:

  • 我认为您可以避免迭代,只需执行function capitalize(s){ let _s = s.trim().toLowerCase(); return _s.charAt(0).toUpperCase() + _s.slice(1) }
【解决方案6】:

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

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

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

【讨论】:

  • @vsync 这似乎很苛刻。这是对已接受答案的优化。 /\b\w/g 对于非英文字母也失败了。不是每个人都处理 unicode 字符,这将帮助那些不想处理的人。
【解决方案7】:

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

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

【讨论】:

  • KennyTM 打败了你。检查他对问题部分的评论。 :-)
  • 是的,我知道这个 CSS 属性,但是我需要这个作为 dom 元素的 title 属性,而且它没有任何 CSS,你可能知道。
【解决方案8】:

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

你可以在这里找到它:Title Capitalization in JavaScript

【讨论】:

    【解决方案9】:

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

    【讨论】:

    • 我不喜欢以这种方式制作原型,因为我的脚本有时是第三方嵌入到其他网站中的,这可能会导致与“String”等全局对象混淆......所以我更喜欢而是“运行”它。
    • 这就是原型的美妙之处(不是你下载的原型)。它在 javascript 中是标准的,适用于所有浏览器。
    • 我怀疑如果其他人已经对他自己的 String.prototype.capitalize 进行了原型设计,这可能会导致问题,我会不小心覆盖它。
    • @vsync,您可以随时通过此操作进行检查。 if (object.capitalize) {...} else {String.prototype.capitalize = function()....} 其中对象的类型为 String。所以,这真的很简单。
    【解决方案10】:

    我的解决方案:

    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的重音
    • 这不起作用:'a áAA. bb . bbb .cc .d'.toCapital(); => a Áaa. bb . Bbb .cc .d
    • 我不考虑少于 2 个字母的单词,例如“of”、“as”。
    【解决方案11】:

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

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

    【讨论】:

      【解决方案12】:

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

      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
      

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

      【讨论】:

      • 你能解释一下为什么你认为你的答案比很多年前的其他人更好吗?
      • 你能解释一下为什么你认为我的意思是我的答案是最好的/或比其他人更好的吗?我没有提到,只是不同而已。另外我没有看到你在其他帖子上留下这个评论,所以我真的不明白。但对于初学者来说:它使用现代 js 特性(解构、粗箭头、隐式返回),它不使用 regx,它是解决问题的更实用的方法。它也有非常基本的错误处理,如果你传递一个(对我来说很重要)返回空字符串。
      • 可以有所不同,但它必须更好或等于其他答案,而且它似乎...不可读,当然没有人会投入生产代码,因为没有人能够理解它
      • 啊,好吧,这里有 50% 的解决方案是您将实际投入生产的猴子补丁字符串?或者可能是复杂的正则表达式?这些更容易推理,对吧?恕我直言,绝对不是!还说没有人会理解这是非常主观的陈述。另外for this 你说那是一段代码(更多功能,但这里不是这种情况)。怎么把它撕碎,我的解决方案没人会理解?解开这些正则表达式是不可能不浪费时间的。
      • 该代码是 Resig 先生自己编写的,不应受到质疑。另一方面,由于您的匿名性,您缺乏可信度。无论如何,Regex 解决方案更短,运行速度快得多,并且任何学习过 Regex 基础知识的人都可以轻松阅读。在这方面几乎没有什么可以“解开”的:/\b\w/g ...
      【解决方案13】:

      此解决方案不使用正则表达式,支持重音字符,并且几乎所有浏览器都支持。

      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 程序

      【讨论】:

      • 这种方式会消耗大量的CPU资源。 JavaScript 不会更改原始值,这意味着每次执行操作时都会创建一个新值。最好使用原生函数,如“替换”,示例。
      【解决方案14】:

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

      Google 可以解决此类问题。

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

      【讨论】:

        【解决方案15】:

        此代码将点后的单词大写:

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

        【讨论】:

          【解决方案16】:

          我喜欢简单的过程。首先将字符串更改为数组以便于迭代,然后使用 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;
            }
          

          【讨论】:

            【解决方案17】:

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

            【讨论】:

              【解决方案18】:

              使用这个:

              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>

              【讨论】:

                【解决方案19】:

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

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

                【讨论】:

                  【解决方案20】:

                  还有 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();
                    });
                  };
                  

                  【讨论】:

                    【解决方案21】:

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

                    myString = '  this Is my sTring.  ';
                    myString.trim().toLowerCase().replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())));
                    

                    【讨论】:

                      猜你喜欢
                      • 2020-02-22
                      • 1970-01-01
                      • 2017-04-04
                      • 1970-01-01
                      • 2016-09-06
                      • 2018-08-06
                      • 2016-02-15
                      • 1970-01-01
                      相关资源
                      最近更新 更多