JavaScriptで文字列をタイトルケースに変換

文字列をタイトルケースに変換する簡単な方法はありますか？例えばにjohn smithなりJohn Smithます。John Resigのソリューションのような複雑なものを探しているのではなく、（おそらく）ある種の1ライナーまたは2ライナーを探しています。

これを試して：

    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>

もう少しエレガントな方法で、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();

コントロールにテキスト変換 CSSスタイルを適用してみてください。

例えば： (text-transform: capitalize);

絶対に必要な場合にのみ、JSアプローチを使用してください。

これが私のバージョンです。IMOも理解しやすくエレガントです。

var str = "foo bar baz"

console.log(

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

)
// returns "Foo Bar Baz"

タイトルの大文字に変換すると同時に、定義された頭字語を大文字に、マイナーワードを小文字に保持する関数を次に示します。

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:"

私は他の答えよりも以下を好む。各単語の最初の文字のみを照合し、大文字にします。シンプルなコード、読みやすく、バイトが少ない。頭字語のゆがみを防ぐために、既存の大文字を保持します。ただし、常にtoLowerCase()最初に文字列を呼び出すことができます。

function title(str) {
  return str.replace(/(^|\s)\S/g, function(t) { return t.toUpperCase() });
}

これを文字列プロトタイプに追加すると'my string'.toTitle()、次のことが可能になります。

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

例：

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

console.log('all lower case ->','all lower case'.toTitle());
console.log('ALL UPPER CASE ->','ALL UPPER CASE'.toTitle());
console.log("I'm a little teapot ->","I'm a little teapot".toTitle());

参考のために正規表現を使用しない場合：

String.prototype.toProperCase = function() {
  var words = this.split(' ');
  var results = [];
  for (var i = 0; i < words.length; i++) {
    var letter = words[i].charAt(0).toUpperCase();
    results.push(letter + words[i].slice(1));
  }
  return results.join(' ');
};

console.log(
  'john smith'.toProperCase()
)

toLowerCase文字列をすぐに入力し、toUpperCase各単語の最初の文字だけを入力することもできます。非常にシンプルな1ライナーになります。

function titleCase(str) {
  return str.toLowerCase().replace(/\b(\w)/g, s => s.toUpperCase());
}

console.log(titleCase('iron man'));
console.log(titleCase('iNcrEdible hulK'));

これらのフィラーワードが心配な場合に備えて、大文字にしないことを関数にいつでも伝えることができます。

/**
 * @param String str The text to be converted to titleCase.
 * @param Array glue the words to leave in lowercase. 
 */
var titleCase = function(str, glue){
    glue = (glue) ? glue : ['of', 'for', 'and'];
    return str.replace(/(\w)(\w*)/g, function(_, i, r){
        var j = i.toUpperCase() + (r != null ? r : "");
        return (glue.indexOf(j.toLowerCase())<0)?j:j.toLowerCase();
    });
};

これがお役に立てば幸いです。

編集する

先頭のグルーワードを処理したい場合は、もう1つの変数を使用してこれを追跡できます。

var titleCase = function(str, glue){
    glue = !!glue ? glue : ['of', 'for', 'and', 'a'];
    var first = true;
    return str.replace(/(\w)(\w*)/g, function(_, i, r) {
        var j = i.toUpperCase() + (r != null ? r : '').toLowerCase();
        var result = ((glue.indexOf(j.toLowerCase()) < 0) || first) ? j : j.toLowerCase();
        first = false;
        return result;
    });
};

上記のソリューションで使用されている正規表現が混乱している場合は、次のコードを試してください。

function titleCase(str) {
  return str.split(' ').map(function(val){ 
    return val.charAt(0).toUpperCase() + val.substr(1).toLowerCase();
  }).join(' ');
}

「McDonald」、「MacDonald」、「O'Toole」、「D'Orazio」などの姓（タイトルの大文字小文字ではない）を処理できるこの関数を作成しました。ただし、小文字であることが多い "van"または "von"を含むドイツ語またはオランダ語の名前は処理されません... "de"も "Robert de Niro"のように小文字であることが多いと思います。これらはまだ対処する必要があります。

function toProperCase(s)
{
  return s.toLowerCase().replace( /\b((m)(a?c))?(\w)/g,
          function($1, $2, $3, $4, $5) { if($2){return $3.toUpperCase()+$4+$5.toUpperCase();} return $1.toUpperCase(); });
}

var toMatch = "john w. smith";
var result = toMatch.replace(/(\w)(\w*)/g, function (_, i, r) {
      return i.toUpperCase() + (r != null ? r : "");
    }
)

動作しているようです...上記、「キツネ、キツネ？/ jumps / ^ over ^ the¡lazy！dog ...」と「C：/ program files / some vendor / theird 2nd application / a file1.txt」。

2ndではなく2Ndが必要な場合は、に変更できます/([a-z])(\w*)/g。

最初のフォームは次のように簡略化できます。

function toTitleCase(toTransform) {
  return toTransform.replace(/\b([a-z])/g, function (_, initial) {
      return initial.toUpperCase();
  });
}

これを試して

String.prototype.toProperCase = function(){
    return this.toLowerCase().replace(/(^[a-z]| [a-z]|-[a-z])/g, 
        function($1){
            return $1.toUpperCase();
        }
    );
};

例

var str = 'john smith';
str.toProperCase();

コードでサードパーティのライブラリを使用できる場合、lodashにはヘルパー関数があります。

https://lodash.com/docs/4.17.3#startCase

_.startCase('foo bar');
// => 'Foo Bar'

_.startCase('--foo-bar--');
// => 'Foo Bar'
 
_.startCase('fooBar');
// => 'Foo Bar'
 
_.startCase('__FOO_BAR__');
// => 'FOO BAR'

これを最短の方法で試してください：

str.replace(/(^[a-z])|(\s+[a-z])/g, txt => txt.toUpperCase());

ES 6

str.split(' ')
   .map(s => s.slice(0, 1).toUpperCase() + s.slice(1).toLowerCase())
   .join(' ')

そうしないと

str.split(' ').map(function (s) {
    return s.slice(0, 1).toUpperCase() + s.slice(1).toLowerCase();
}).join(' ')

これらの回答のほとんどは、単語境界メタ文字（\ b）を使用する可能性を無視しているようです。それを利用したGreg Deanの回答の短いバージョン：

function toTitleCase(str)
{
    return str.replace(/\b\w/g, function (txt) { return txt.toUpperCase(); });
}

Jim-Bobのようなハイフン付きの名前でも機能します。

最も簡単なのはcssを使うことだと思います。

function format_str(str) {
    str = str.toLowerCase();
    return '<span style="text-transform: capitalize">'+ str +'</span>';
}

/\S+/g分音記号をサポートするために使用：

function toTitleCase(str) {
  return str.replace(/\S+/g, str => str.charAt(0).toUpperCase() + str.substr(1).toLowerCase());
}

console.log(toTitleCase("a city named örebro")); // A City Named Örebro

ただし、「s unshine（y ellow）」⇒「S unshine（y ellow）」

ここにリストされているtoTitleCase文法規則を考慮に入れる堅牢な関数が必要だったので、自分の答えを追加したかった（Google推奨の記事）。入力文字列の長さに依存するさまざまなルールがあります。以下は、機能+単体テストです。

この関数は、空白を統合し、特殊文字を削除します（必要に応じて正規表現を変更します）。

toTitleCase関数

const toTitleCase = (str) => {
  const articles = ['a', 'an', 'the'];
  const conjunctions = ['for', 'and', 'nor', 'but', 'or', 'yet', 'so'];
  const prepositions = [
    'with', 'at', 'from', 'into','upon', 'of', 'to', 'in', 'for',
    'on', 'by', 'like', 'over', 'plus', 'but', 'up', 'down', 'off', 'near'
  ];

  // The list of spacial characters can be tweaked here
  const replaceCharsWithSpace = (str) => str.replace(/[^0-9a-z&/\\]/gi, ' ').replace(/(\s\s+)/gi, ' ');
  const capitalizeFirstLetter = (str) => str.charAt(0).toUpperCase() + str.substr(1);
  const normalizeStr = (str) => str.toLowerCase().trim();
  const shouldCapitalize = (word, fullWordList, posWithinStr) => {
    if ((posWithinStr == 0) || (posWithinStr == fullWordList.length - 1)) {
      return true;
    }

    return !(articles.includes(word) || conjunctions.includes(word) || prepositions.includes(word));
  }

  str = replaceCharsWithSpace(str);
  str = normalizeStr(str);

  let words = str.split(' ');
  if (words.length <= 2) { // Strings less than 3 words long should always have first words capitalized
    words = words.map(w => capitalizeFirstLetter(w));
  }
  else {
    for (let i = 0; i < words.length; i++) {
      words[i] = (shouldCapitalize(words[i], words, i) ? capitalizeFirstLetter(words[i], words, i) : words[i]);
    }
  }

  return words.join(' ');
}

正しいことを確認するための単体テスト

import { expect } from 'chai';
import { toTitleCase } from '../../src/lib/stringHelper';

describe('toTitleCase', () => {
  it('Capitalizes first letter of each word irrespective of articles, conjunctions or prepositions if string is no greater than two words long', function(){
    expect(toTitleCase('the dog')).to.equal('The Dog'); // Capitalize articles when only two words long
    expect(toTitleCase('for all')).to.equal('For All'); // Capitalize conjunctions when only two words long
    expect(toTitleCase('with cats')).to.equal('With Cats'); // Capitalize prepositions when only two words long
  });

  it('Always capitalize first and last words in a string irrespective of articles, conjunctions or prepositions', function(){
    expect(toTitleCase('the beautiful dog')).to.equal('The Beautiful Dog');
    expect(toTitleCase('for all the deadly ninjas, be it so')).to.equal('For All the Deadly Ninjas Be It So');
    expect(toTitleCase('with cats and dogs we are near')).to.equal('With Cats and Dogs We Are Near');
  });

  it('Replace special characters with space', function(){
    expect(toTitleCase('[wolves & lions]: be careful')).to.equal('Wolves & Lions Be Careful');
    expect(toTitleCase('wolves & lions, be careful')).to.equal('Wolves & Lions Be Careful');
  });

  it('Trim whitespace at beginning and end', function(){
    expect(toTitleCase(' mario & Luigi superstar saga ')).to.equal('Mario & Luigi Superstar Saga');
  });

  it('articles, conjunctions and prepositions should not be capitalized in strings of 3+ words', function(){
    expect(toTitleCase('The wolf and the lion: a tale of two like animals')).to.equal('The Wolf and the Lion a Tale of Two like Animals');
    expect(toTitleCase('the  three Musketeers  And plus ')).to.equal('The Three Musketeers and Plus');
  });
});

提供された文字列からかなりの特殊文字を削除していることに注意してください。プロジェクトの要件に対処するには、正規表現を微調整する必要があります。

"john f. kennedy".replace(/\b\S/g, t => t.toUpperCase())

「lewax00」ソリューションを使用して、スペースで始まる「w」または単語を開始する「w」を強制するこの単純なソリューションを作成しましたが、余分な中間スペースを削除できません。

"SOFÍA vergara".toLowerCase().replace(/\b(\s\w|^\w)/g, function (txt) { return txt.toUpperCase(); });

結果は「ソフィアベルガラ」です。

これがアクセント付き文字を処理する（フランス語では重要です！）私の関数で、lowers例外の処理のオン/オフを切り替えることができます。お役に立てば幸いです。

String.prototype.titlecase = function(lang, withLowers = false) {
    var i, string, lowers, uppers;

    string = this.replace(/([^\s:\-'])([^\s:\-']*)/g, function(txt) {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    }).replace(/Mc(.)/g, function(match, next) {
        return 'Mc' + next.toUpperCase();
    });

    if (withLowers) {
        if (lang == 'EN') {
            lowers = ['A', 'An', 'The', 'At', 'By', 'For', 'In', 'Of', 'On', 'To', 'Up', 'And', 'As', 'But', 'Or', 'Nor', 'Not'];
        }
        else {
            lowers = ['Un', 'Une', 'Le', 'La', 'Les', 'Du', 'De', 'Des', 'À', 'Au', 'Aux', 'Par', 'Pour', 'Dans', 'Sur', 'Et', 'Comme', 'Mais', 'Ou', 'Où', 'Ne', 'Ni', 'Pas'];
        }
        for (i = 0; i < lowers.length; i++) {
            string = string.replace(new RegExp('\\s' + lowers[i] + '\\s', 'g'), function(txt) {
                return txt.toLowerCase();
            });
        }
    }

    uppers = ['Id', 'R&d'];
    for (i = 0; i < uppers.length; i++) {
        string = string.replace(new RegExp('\\b' + uppers[i] + '\\b', 'g'), uppers[i].toUpperCase());
    }

    return string;
}

私たちはここオフィスで議論を重ねてきましたが、現在の方法でユーザーが名前を入力する方法を自動的に修正しようとすると、問題が発生する可能性があると考えています。

さまざまな種類の自動大文字がばらばらになるいくつかのケースが考えられます。これらは英語の名前だけのものであり、各言語には独自の複雑さがあります。

各名前の最初の文字の大文字化に関する問題：

•IBMなどの頭字語は入力できません。Ibmに変わります。

•マクドナルドの名前はマクドナルドに変わりますが、これは正しくありません。マクドナルドも同じです。

•マリートンクスなどの二重樽型の名前は、マリートンクスに変わります。

•O'Connorのような名前はO'connorに変わります。

これらのほとんどについては、それに対処するためのカスタムルールを作成できますが、これには以前と同じように頭字語に関する問題があり、新しい問題が発生します。

•MacDonaldなどのMacで名前を修正するルールを追加すると、Macyなどの名前が壊れてMacYになります。

私たちが思いついた唯一の解決策は決して誤りではなく、DBSも使用していると思われる総当たりの方法であるすべての文字を大文字にすることです。

したがって、プロセスを自動化したい場合は、すべての名前と単語の辞書とそれをどのように大文字にする必要があるかを考えずに行うことは不可能です。すべてをカバーするルールがない場合は、そのまま使用しないでください。単にユーザーを困らせ、自分の名前を正しく入力したい人に別の場所に行くように促します。

次に、css（および変換するテキストが大文字の場合はJavaScript）を使用した別の解決策を示します。

html

<span id='text'>JOHN SMITH</span>

js

var str = document.getElementById('text').innerHtml;
var return_text = str.toLowerCase();

CSS

#text{text-transform:capitalize;}

正規表現が怖い私たちのために（笑）：

function titleCase(str)
{
    var words = str.split(" ");
    for ( var i = 0; i < words.length; i++ )
    {
        var j = words[i].charAt(0).toUpperCase();
        words[i] = j + words[i].substr(1);
    }
    return words.join(" ");
}

私の1行のソリューション：

String.prototype.capitalizeWords = function() {
    return this.split(" ").map(function(ele){ return ele[0].toUpperCase() + ele.slice(1).toLowerCase();}).join(" ");
};

その後、capitalizeWords()任意の文字列に対してメソッドを呼び出すことができます。例えば：

var myS = "this actually works!";
myS.capitalizeWords();

>>> This Actually Works

私の他の解決策：

function capitalizeFirstLetter(word) {
    return word[0].toUpperCase() + word.slice(1).toLowerCase();
}
String.prototype.capitalizeAllWords = function() {
    var arr = this.split(" ");
    for(var i = 0; i < arr.length; i++) {
        arr[i] = capitalizeFirstLetter(arr[i]);
    }
    return arr.join(" ");
};

その後、capitalizeWords()任意の文字列に対してメソッドを呼び出すことができます。例えば：

var myStr = "this one works too!";
myStr.capitalizeWords();

>>> This One Works Too

Greg Deanの回答に基づく代替ソリューション：

function capitalizeFirstLetter(word) {
    return word[0].toUpperCase() + word.slice(1).toLowerCase();
}
String.prototype.capitalizeWords = function() {
    return this.replace(/\w\S*/g, capitalizeFirstLetter);
};

その後、capitalizeWords()任意の文字列に対してメソッドを呼び出すことができます。例えば：

var myString = "yes and no";
myString.capitalizeWords()

>>> Yes And No

restパラメータの使用について誰も言及しなかったことに驚いた。以下は、ES6 Restパラメータを使用するシンプルな1ライナーです。

let str="john smith"
str=str.split(" ").map(([firstChar,...rest])=>firstChar.toUpperCase()+rest.join("").toLowerCase()).join(" ")
console.log(str)

これは、FreeCodeCampのBonfireの "タイトルケース"に対する私のソリューションに基づいています。このソリューションでは、最初に特定の文字列をすべて小文字に変換し、次にスペースに続くすべての文字を大文字に変換する必要があります。

正規表現を使用しない場合：

function titleCase(str) {
 return str.toLowerCase().split(' ').map(function(val) { return val.replace(val[0], val[0].toUpperCase()); }).join(' ');
}