文字列内の単語を大文字にします


183

文字列内の単語を大文字にする最善の方法は何ですか?


66
表示用の場合は、CSSを使用してください。text-transform:capitalize;
kennytm

3
これは、「title」属性をDOM要素に設定するために使用されます。CSSなし:)
vsync '25

1
また、私はこの質問をしましたが、解決策は知っていますが、このWebサイトで探してみたが、適切な解決策が見つからなかったため、ドキュメントのために追加しました。
vsync '25

1
@KennyTM:テキスト変換はフォームのフィールドの値を実際には大文字にしません。すべての値は大文字で表示されますが、そのままサーバーに送信されます。
Marco Demaio、2011年

8
@マルコ:はい、それが「展示用なら」と私が言った理由です。
kennytm 2011年

回答:


287
/**
 * 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(){return 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

1
@ SeaWarrior404、そうです、私の答えをes6構文で更新し、jsdocといくつかの句読点の扱いを追加しました
無効化

216

文字列内の単語を大文字にするための最も短い実装は、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 '22

2
これは北欧の文字ä、ö、åでは機能しないようです。たとえば、次のようにpäijät-hämeなりますPäIjäT-HäMe
Markus Meskanen

1
この解決策は、発音区別符号/非ラテン文字を含む国際的なコンテンツには適していません。EisbäRenたとえば、1つの結果です。
Daniel B.17年

3
@MarkusMeskanenの例はに変更する必要がありますPäijät-Hämeが、少なくともChromeの空白にはダッシュ(-)が含まれないため、名前の2番目の部分は大文字になりません。として修正できます/(^|\s|-)\S/g
MiRin 2018年

34
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/...私もそれをprotoyped。
Marco Demaio 2011

9
私はプロトタイピングが好きではありません。他の誰かが同じ名前を使用してStringのプロトタイプを作成していると、衝突が発生する可能性があります。
vsync 2011

15

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

1
" javascript".toCapitalize() -> " javascript"
11

2
誰が懸念するか:不満の答えstackoverflow.com/questions/2332811/capitalize-words-in-string/…が、ここでの最良の回答です。
Marco Demaio、2011年

4

誰もがあなたが求めたJavaScriptの答えをあなたに与えたので、私はそのCSSプロパティを投入します text-transform: capitalizeがまさにこれを行う。

これあなたが求めているものでないかもしれません-あなたはこれを実行しているコンテキストを私たちに与えていません-しかし、それがプレゼンテーションのためだけなら、間違いなくCSSの代替案を使います。


KennyTMがあなたを打ち負かしました。質問セクションで彼のコメントを確認してください。:-)
ブハケシンディ

はい、このCSS属性は知っていますが、dom要素のtitle属性に必要です。ご存知のように、CSSはこれまでありません。
vsync

4

(jQuery fameの)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
私のスクリプトは他のウェブサイトのサードパーティの埋め込みである場合があり、「文字列」などのグローバルオブジェクトをいじるのに問題が発生する可能性があるので、私はこの方法でプロトタイピングのファンではありません。
vsync '25

1
それがプロトタイプの美しさです(ダウンロードしたプロトタイプではありません)。これはJavaScriptの標準であり、すべてのブラウザで動作します。
ブハケシンディ2010

他の誰かが自分のString.prototype.capitalizeをすでにプロトタイプ化している場合、問題が発生する可能性があると思います。誤ってオーバーライドします。
vsync 2010年

1
@vsync、これを行うことでいつでも確認できます。if (object.capitalize) {...} else {String.prototype.capitalize = function()....}ここで、オブジェクトのタイプはStringです。それで、それは本当に非常に単純です。
ブハケシンディ

4

Ivoの答えは良いですが、\w0-9とAZを大文字にする必要がないので、私は一致しないことを好みます。それらは無視でき、azでのみ一致します。

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

それは同じ出力ですが、自己文書化コードの点でより明確だと思います。


これは英語以外の文字では失敗し"Är Toaletten"ます:。あなたの答え、非常に良いが...議論に寄与しない、提供されていた答えの後に年
VSYNC

@vsyncはかなり厳しいようです。それは受け入れられた答えに対する最適化です。/\b\w/g英語以外の文字の場合も失敗します。誰もがユニコード文字を扱うわけではありません。これは、そうしたくない人を助けるのに役立ちます。
ビッグマネー

1
了解しました。英語以外の言語が必要ないという理由だけで、トップアンサーの代わりにこれを使用するべきではないと思います。上の質問で述べたように、すべてのASCII文字に対してそれを行うことに対するペナルティがないため、それは十分な正当化ではありません
vsync

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>


3

ES6の簡潔な方法は、次のようになります。

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

これは最初の文字だけを大文字にし、文の他の大文字小文字には影響しません。


2

私の解決策:

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
vsync

"of"、 "as"のように2文字未満の単語は考慮しないようにしました。
Erick Tatsui

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 2018

私の回答が他の回答よりも優れている、または優れていると私が考えた理由を説明できますか?私はそれについて言及しなかった、それはただ違う。また、あなたが他の投稿にこのコメントを残すのを見なかったので、私は本当にそれを取得しません。しかし、初心者のために:それは近代的なjs機能(構造化、太い矢印、暗黙のリターン)を使用し、regxを使用せず、問題に対するより機能的なアプローチです。また、非常に基本的なエラー処理があり、それを渡すと空の文字列が返されます(私にはそれが重要でした)。
ドロップ

それは異なっていてもしても大丈夫だが、それがなければならない、より良いまたは他の回答に等しく、そしてそれがために...読めない表示され、誰もがそれを理解することはできなくなるので、確かに何も1は、生産コードに置く
VSYNC

ああ、わかりました。ソリューションの50%で、ここで実際にモンキーパッチ文字列を作成するのはどれでしょうか。それとも複雑な正規表現ですか?それらは推論するのがはるかに簡単ですよね?どうしようもない!また、誰もこれを理解できないと言っているのは、かなり主観的な発言です。また、これについては、それが細断されたコードの断片であると述べました(より多くの機能ですが、ここではそうではありません)。それがどのように細断され、私の解決策が誰にも理解されないのですか?時間を失うことなくそれらの正規表現のもつれを解く方法はありません。
ドロップ

そのコードはResig氏自身が作成したものであり、質問すべきではありません。一方、あなたの匿名性のため、あなたは信頼性に欠けています。とにかく、Regexソリューションはより短く、はるかに高速で実行され、Regexの基本を学んだ人なら誰でも簡単に読むことができます。これで「/\b\w/g
もつれる

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( 'çao2nd JavaScriptプログラム内'));

出力:

Çao2nd Inside JavaScriptプログラム


1
この方法は、多くのCPUリソースを消費します。JavaScriptはプリミティブ値を変更しないため、操作が実行されるたびに新しい値が作成されます。「replace」のようなネイティブ関数を使用する方が良いです(例:gratia)
Daniel Bandeira

0

http://www.mediacollege.com/internet/javascript/text/case-capitalize.htmlは、多くの回答の1つです。

そのような問題に必要なのは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

私は簡単なプロセスで行くのが好きです。最初に文字列を配列に変更して簡単に反復し、次に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())));
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.