Як я можу писати велику літеру кожного слова в рядку за допомогою JavaScript?


117

Я намагаюся написати функцію, яка пише велику літеру кожного слова в рядку (перетворюючи рядок у регістр заголовка).

Наприклад, коли вхідний сигнал є "I'm a little tea pot", я очікую, що "I'm A Little Tea Pot"це буде вихідним. Однак функція повертається "i'm a little tea pot".

Це мій код:

function titleCase(str) {
  var splitStr = str.toLowerCase().split(" ");

  for (var i = 0; i < splitStr.length; i++) {
    if (splitStr.length[i] < splitStr.length) {
      splitStr[i].charAt(0).toUpperCase();
    }

    str = splitStr.join(" ");
  }

  return str;
}

console.log(titleCase("I'm a little tea pot"));


Це не схоже на те, що він пише велику літеру першої літери лише рядка. Або ви маєте на увазі, що хочете написати великі літери кожного слова, що міститься в рядку.
epascarello

2
Ви не присвоюєте свої великі літери своєму результату, splitStr[i].charAt(0).toUpperCase();збираєтеся void. Вам потрібно зробитиsplitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);
щось тут,

1
Ви повинні спочатку сказати нам. Що не так з цією функцією? Який очікуваний результат і що він поверне натомість?
Себастьян Саймон

Ця функція виглядає так, ніби вона намагається писати з великих літер перший символ кожного слова.
Halcyon

3
Як сказано в назві, я намагаюся писати велику літеру першої літери кожного слова в рядку. Я не ціную негативних голосів чи негативів на форумі, який повинен мати підтримку. @somethinghere - Дякуємо за відповідь.
slurrr

Відповіді:


166

Ви більше не призначаєте свої зміни масиву, тому всі ваші зусилля марні. Спробуйте це:

function titleCase(str) {
   var splitStr = str.toLowerCase().split(' ');
   for (var i = 0; i < splitStr.length; i++) {
       // You do not need to check if i is larger than splitStr length, as your for does that for you
       // Assign it back to the array
       splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);     
   }
   // Directly return the joined string
   return splitStr.join(' '); 
}

document.write(titleCase("I'm a little tea pot"));


@Halcyon Це означало б лише одну букву для кожного слова.
epascarello

15
У es6 ви можете зробити це, що виглядає дещо приємніше:myStr.toLowerCase().split(' ').map(word => word.charAt(0).toUpperCase() + word.substring(1)).join(' ');
Патрік Майклсен

1
@PatrickMichaelsen Справді, ти можеш. Я не буду змінювати відповідь, вона починається з 2015 року, і я знаю, що часи змінилися, але я продовжуватиму її для нащадків. Крім того, я б також не писав його так :) Але, не соромтеся розміщувати свою як власну відповідь, я думаю?
щось тут

1
Так, я згоден, поточна відповідь - це нормально. Ось чому я помістив це в коментарях, просто для ознайомлення з новими відвідувачами.
Patrick Michaelsen

1
Я провів порівняльний аналіз цієї функції з 3 функціями конкурента і виявив, що вона є найбільш ефективною - менше 1/3 часу виконання найгіршого конкурента (Chrome 73). jsben.ch/AkHgP
Майкл Томпсон,

92

Ви робите комплекс дуже простою справою. Ви можете додати це у свій CSS:

.capitalize {
    text-transform: capitalize;
}

У JavaScript ви можете додати клас до елемента

 document.getElementById("element").className = "capitalize";

@epascarello Я вас не розумію, що ви мені говорите?
Маркос Перес Гуде

Питання : «Що не так з цією функцією?», Інакше це було б дублікатом stackoverflow.com/questions/1026069 / ... або stackoverflow.com/questions/196972 / ...
Hacketo

2
дякую за відповідь, але я намагаюся зробити це, використовуючи javascript для практики @ MarcosPérezGude
slurrr

1
Так, це справді багатогранно
Маркос Перес Гуде

3
На жаль, в деяких випадках, якщо значення становить 20 мм, і ви використовуєте великі літери, воно буде 20 мм. У деяких випадках javascript може бути єдиним методом.
Буц

79

Версія ECMAScript 6 :

const toTitleCase = (phrase) => {
  return phrase
    .toLowerCase()
    .split(' ')
    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ');
};

let result = toTitleCase('maRy hAd a lIttLe LaMb');
console.log(result);


1
Я також думаю, що ви пропали toLowerCase()з самого початку, на випадок, якщо користувач або рядок є змішаним регістром.
ArchNoob

45

Я думаю, що цей шлях повинен бути швидшим; бо він не розбиває рядок і приєднується до нього знову; просто використовуючи регулярний вираз.

var str = text.replace(/(^\w{1})|(\s{1}\w{1})/g, match => match.toUpperCase());

Пояснення :

  1. (^\w{1}): відповідає першому символу рядка
  2. |: або
  3. (\s{1}\w{1}): відповідає одному символу, який з’явився після одного пробілу
  4. g: відповідати усім
  5. match => match.toUpperCase (): замінити на can take function, so; замінити сірник на верхній регістр

1
Настільки чистіше!
Cliff Hall

Чому \s{1}? Я б сказав \s+, так це працює навіть з кількома пробілами між словами
Крістіан Траяна

У моєму випадку; це рівно 1 пробіл, і так; це повинно працювати!
німересам

Струни незмінні. регулярний вираз буде розбиватися і з'єднуватися під капотом. Насправді це ніяк не обійти.
bluegrounds

24

Якщо ви можете використовувати сторонню бібліотеку, то 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'
<script src="https://cdn.jsdelivr.net/lodash/4.17.3/lodash.min.js"></script>


19

У ECMAScript 6 однорядкова відповідь із використанням функції стрілки:

const captialize = words => words.split(' ').map( w =>  w.substring(0,1).toUpperCase()+ w.substring(1)).join(' ')

3
Приємно! Ви можете використовувати, w[0]щоб зробити його ще коротшим .. На відміну від регулярного виразу, його легко розширити БУДЬ-ЯКИМ символом, але не тільки space. Будь-яким я маю на увазі ( [ ", тому що літери також слід писати з великої літери після цих символів. Тож спасибі за ваше рішення!
Systems Rebooter

17

Найкоротший один лайнер (також надзвичайно швидкий):

 text.replace(/(^\w|\s\w)/g, m => m.toUpperCase());

Пояснення:

  • ^\w : перший символ рядка
  • | : або
  • \s\w : перший символ після пробілу
  • (^\w|\s\w) Захоплення шаблону.
  • g Позначити: збіг усіх випадків.

Якщо ви хочете переконатись, що решта написана малими літерами:

text.replace(/(^\w|\s\w)(\S*)/g, (_,m1,m2) => m1.toUpperCase()+m2.toLowerCase())

Це приголомшливо! RegEx - найкращі. Чи можете ви більше не вивчати, що робить ця частина? m => m.toUpperCase()
marcin2x4

1
@ marcin2x4 mвідповідає першому символу, тому робить перший символ великим.
кури

12

Версія ECMAScript 6 :

title
    .split(/ /g).map(word =>
        `${word.substring(0,1).toUpperCase()}${word.substring(1)}`)
    .join(" ");

6
Я бачив це тільки зараз, і це досить акуратно, але я думаю, що вам потрібно приєднатися, використовуючи " "замість "", інакше ви отримаєте одне велике слово, ні?
щось тут

9

𝗙𝗮𝘀𝘁𝗲𝘀𝘁 𝗦𝗼𝗹𝘂𝘁𝗶𝗼𝗻 𝗙𝗼𝗿 𝗟𝗮𝘁𝗶𝗻-𝗜 𝗖𝗵𝗮𝗿𝗮𝗰𝘁𝗲𝗿𝘀

Ви можете просто використовувати функцію регулярного виразу, щоб змінити великі літери кожної літери. З V8 JIST оптимізацією, це повинно виявитись швидким та ефективною пам’яттю.

// Only works on Latin-I strings
'tHe VeRy LOOong StRINg'.replace(/\b[a-z]|['_][a-z]|\B[A-Z]/g, function(x){return x[0]==="'"||x[0]==="_"?x:String.fromCharCode(x.charCodeAt(0)^32)})

Або, як функція:

// Only works for Latin-I strings
var fromCharCode = String.fromCharCode;
var firstLetterOfWordRegExp = /\b[a-z]|['_][a-z]|\B[A-Z]/g;
function toLatin1UpperCase(x){ // avoid frequent anonymous inline functions
    var charCode = x.charCodeAt(0);
    return charCode===39 ? x : fromCharCode(charCode^32);
}
function titleCase(string){
    return string.replace(firstLetterOfWordRegExp, toLatin1UpperCase);
}

Згідно з цим тестом , код на 33% швидший, ніж наступне найкраще рішення в Chrome.


𝗗𝗲𝗺𝗼

<textarea id="input" type="text">I'm a little tea pot</textarea><br /><br />
<textarea id="output" type="text" readonly=""></textarea>
<script>
(function(){
    "use strict"
    var fromCode = String.fromCharCode;
    function upper(x){return x[0]==="'"?x:fromCode(x.charCodeAt(0) ^ 32)}
    (input.oninput = function(){
      output.value = input.value.replace(/\b[a-z]|['_][a-z]|\B[A-Z]/g, upper);
    })();
})();
</script>


Ви забули додати функцію return як у: function autoCaps (string) {return string.replace (/ \ b [az] | \ B [AZ] / g, function (x) {return String.fromCharCode (x.charCodeAt (0) ^ 32);}); }
Арчі

@Archy Дякуємо за виправлення. Я вніс зміни, які ви запропонували.
Джек Гіффін,


6

Також хороший варіант (особливо, якщо ви використовуєте freeCodeCamp ):

function titleCase(str) {
  var wordsArray = str.toLowerCase().split(/\s+/);
  var upperCased = wordsArray.map(function(word) {
    return word.charAt(0).toUpperCase() + word.substr(1);
  });
  return upperCased.join(" ");
}

5

Ця процедура буде обробляти переносні слова та слова з апострофом.

function titleCase(txt) {
    var firstLtr = 0;
    for (var i = 0;i < text.length;i++) {
        if (i == 0 &&/[a-zA-Z]/.test(text.charAt(i)))
            firstLtr = 2;
        if (firstLtr == 0 &&/[a-zA-Z]/.test(text.charAt(i)))
            firstLtr = 2;
        if (firstLtr == 1 &&/[^a-zA-Z]/.test(text.charAt(i))){
            if (text.charAt(i) == "'") {
                if (i + 2 == text.length &&/[a-zA-Z]/.test(text.charAt(i + 1)))
                    firstLtr = 3;
                else if (i + 2 < text.length &&/[^a-zA-Z]/.test(text.charAt(i + 2)))
                    firstLtr = 3;
            }
        if (firstLtr == 3)
            firstLtr = 1;
        else
            firstLtr = 0;
        }
        if (firstLtr == 2) {
            firstLtr = 1;
            text = text.substr(0, i) + text.charAt(i).toUpperCase() + text.substr(i + 1);
        }
        else {
            text = text.substr(0, i) + text.charAt(i).toLowerCase() + text.substr(i + 1);
        }
    }
}

titleCase("pAt o'Neil's");
// returns "Pat O'Neil's";


4

let cap = (str) => {
  let arr = str.split(' ');
  arr.forEach(function(item, index) {
    arr[index] = item.replace(item[0], item[0].toUpperCase());
  });

  return arr.join(' ');
};

console.log(cap("I'm a little tea pot"));

Швидкочитаюча версія див. Еталон http://jsben.ch/k3JVz введіть тут опис зображення


4

Синтаксис ES6

const captilizeAllWords = (sentence) => {
  if (typeof sentence !== "string") return sentence;
  return sentence.split(' ')
    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ');
}


captilizeAllWords('Something is going on here')

Чи не слід замінити word.slice (1) на word.slice (1) .toLowerCase (), щоб переконатись, що решта не пишеться великими літерами (на випадок, якщо це було в оригінальному реченні)?
Антон Круг

4

Ви можете використовувати сучасний синтаксис JS, який може значно полегшити ваше життя. Ось мій фрагмент коду для даної проблеми:

const capitalizeString = string => string.split(' ').map(item => item.replace(item.charAt(0), item.charAt(0).toUpperCase())).join(' ');
capitalizeString('Hi! i am aditya shrivastwa')


3

Зазвичай я вважаю за краще не використовувати регулярний вираз через читабельність, а також намагаюся триматися подалі від циклів. Я думаю, це начебто читабельно.

function capitalizeFirstLetter(string) {
    return string && string.charAt(0).toUpperCase() + string.substring(1);
};

3

Функція нижче не змінює жодної іншої частини рядка, окрім спроб перетворити всі перші літери всіх слів (тобто за визначенням регулярного виразу \w+ ) у великі регістри.

Це означає, що він не обов’язково перетворює слова у регістр заголовків, а робить саме те, що сказано в заголовку запитання: "Великі літери кожного слова в рядку - JavaScript"

  • Не розбивайте рядок
  • визначити кожне слово за регулярним виразом, \w+що еквівалентно[A-Za-z0-9_]+
    • застосовувати функцію String.prototype.toUpperCase()лише до першого символу кожного слова.
function first_char_to_uppercase(argument) {
  return argument.replace(/\w+/g, function(word) {
    return word.charAt(0).toUpperCase() + word.slice(1);
  });
}

Приклади:

first_char_to_uppercase("I'm a little tea pot");
// "I'M A Little Tea Pot"
// This may look wrong to you, but was the intended result for me
// You may wanna extend the regex to get the result you desire, e.g., /[\w']+/

first_char_to_uppercase("maRy hAd a lIttLe LaMb");
// "MaRy HAd A LIttLe LaMb"
// Again, it does not convert words to Titlecase

first_char_to_uppercase(
  "ExampleX: CamelCase/UPPERCASE&lowercase,exampleY:N0=apples"
);
// "ExampleX: CamelCase/UPPERCASE&Lowercase,ExampleY:N0=Apples"

first_char_to_uppercase("…n1=orangesFromSPAIN&&n2!='a sub-string inside'");
// "…N1=OrangesFromSPAIN&&N2!='A Sub-String Inside'"

first_char_to_uppercase("snake_case_example_.Train-case-example…");
// "Snake_case_example_.Train-Case-Example…"
// Note that underscore _ is part of the RegEx \w+

first_char_to_uppercase(
  "Capitalize First Letter of each word in a String - JavaScript"
);
// "Capitalize First Letter Of Each Word In A String - JavaScript"

Редагувати 2019-02-07: Якщо ви хочете дійсний заголовок (тобто лише першу літеру великими буквами, а всі інші малими):

function titlecase_all_words(argument) {
  return argument.replace(/\w+/g, function(word) {
    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
  });
}

Приклади, що показують обидва:

test_phrases = [
  "I'm a little tea pot",
  "maRy hAd a lIttLe LaMb",
  "ExampleX: CamelCase/UPPERCASE&lowercase,exampleY:N0=apples",
  "…n1=orangesFromSPAIN&&n2!='a sub-string inside'",
  "snake_case_example_.Train-case-example…",
  "Capitalize First Letter of each word in a String - JavaScript"
];
for (el in test_phrases) {
  let phrase = test_phrases[el];
  console.log(
    phrase,
    "<- input phrase\n",
    first_char_to_uppercase(phrase),
    "<- first_char_to_uppercase\n",
    titlecase_all_words(phrase),
    "<- titlecase_all_words\n "
  );
}

// I'm a little tea pot <- input phrase
// I'M A Little Tea Pot <- first_char_to_uppercase
// I'M A Little Tea Pot <- titlecase_all_words

// maRy hAd a lIttLe LaMb <- input phrase
// MaRy HAd A LIttLe LaMb <- first_char_to_uppercase
// Mary Had A Little Lamb <- titlecase_all_words

// ExampleX: CamelCase/UPPERCASE&lowercase,exampleY:N0=apples <- input phrase
// ExampleX: CamelCase/UPPERCASE&Lowercase,ExampleY:N0=Apples <- first_char_to_uppercase
// Examplex: Camelcase/Uppercase&Lowercase,Exampley:N0=Apples <- titlecase_all_words

// …n1=orangesFromSPAIN&&n2!='a sub-string inside' <- input phrase
// …N1=OrangesFromSPAIN&&N2!='A Sub-String Inside' <- first_char_to_uppercase
// …N1=Orangesfromspain&&N2!='A Sub-String Inside' <- titlecase_all_words

// snake_case_example_.Train-case-example… <- input phrase
// Snake_case_example_.Train-Case-Example… <- first_char_to_uppercase
// Snake_case_example_.Train-Case-Example… <- titlecase_all_words

// Capitalize First Letter of each word in a String - JavaScript <- input phrase
// Capitalize First Letter Of Each Word In A String - JavaScript <- first_char_to_uppercase
// Capitalize First Letter Of Each Word In A String - Javascript <- titlecase_all_words

3
function titleCase(str) {

    var myString = str.toLowerCase().split(' ');
    for (var i = 0; i < myString.length; i++) {
        var subString = myString[i].split('');
        for (var j = 0; j < subString.length; j++) {
            subString[0] = subString[0].toUpperCase();
        }
        myString[i] = subString.join('');
    }

    return myString.join(' ');
}

1
Додайте коментарі до своєї відповіді.
HDJEMAI

3

Або це можна зробити за допомогою replace () і замінити першу літеру кожного слова на його "upperCase".

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

titleCase("I'm a little tea pot");

2

Ось як ви могли б це зробити з mapфункцією в основному, вона робить те саме, що прийнята відповідь, але без for-loop. Отже, економить кілька рядків коду.

function titleCase(text) {
  if (!text) return text;
  if (typeof text !== 'string') throw "invalid argument";

  return text.toLowerCase().split(' ').map(value => {
    return value.charAt(0).toUpperCase() + value.substring(1);
  }).join(' ');
}

console.log(titleCase("I'm A little tea pot"));


2

Нижче наведено ще один спосіб написання першого алфавіту кожного слова в рядку.

Створіть власний метод для об’єкта String за допомогою prototype.

String.prototype.capitalize = function() {
    var c = '';
    var s = this.split(' ');
    for (var i = 0; i < s.length; i++) {
        c+= s[i].charAt(0).toUpperCase() + s[i].slice(1) + ' ';
    }
    return c;
}
var name = "john doe";
document.write(name.capitalize());

1

Більш компактне (і сучасне) переписування запропонованого рішення @ somethingthere:

let titleCase = (str => str.toLowerCase().split(' ').map(
                c => c.charAt(0).toUpperCase() + c.substring(1)).join(' '));
    
document.write(titleCase("I'm an even smaller tea pot"));


1

Сировинний код:

function capi(str) {
    var s2 = str.trim().toLowerCase().split(' ');
    var s3 = [];
    s2.forEach(function(elem, i) {
        s3.push(elem.charAt(0).toUpperCase().concat(elem.substring(1)));
    });
    return s3.join(' ');
}
capi('JavaScript string exasd');

ви повинні надати трохи більше деталей (що було не так?)
херінг

1

Я використовував replace()із регулярним виразом:

function titleCase(str) {

  var newStr = str.toLowerCase().replace(/./, (x) => x.toUpperCase()).replace(/[^']\b\w/g, (y) => y.toUpperCase());

  console.log(newStr);
}

titleCase("I'm a little tea pot")

1

Повне і просте рішення йде тут:

String.prototype.replaceAt=function(index, replacement) {
        return this.substr(0, index) + replacement+ this.substr(index
  + replacement.length);
}
var str = 'k j g           u              i l  p';
function capitalizeAndRemoveMoreThanOneSpaceInAString() {
    for(let i  = 0; i < str.length-1; i++) {
        if(str[i] === ' ' && str[i+1] !== '')
            str = str.replaceAt(i+1, str[i+1].toUpperCase());
    }
    return str.replaceAt(0, str[0].toUpperCase()).replace(/\s+/g, ' ');
}
console.log(capitalizeAndRemoveMoreThanOneSpaceInAString(str));

Чому ви змінюєте String.prototype кожного разу, коли цей метод викликається? Якщо що-небудь вам потрібно зробити це один раз , і бажано ніколи не торкатися прототипів вбудованих модулів. Це трохи ні-ні ...
щось тут

1
let str = "I'm a little tea pot";

str = str.toLowerCase();

і додати властивість css text-transform: capitalize;до відповідного елемента.


0

Перевірте код нижче.

function titleCase(str) {
  var splitStr = str.toLowerCase().split(' ');
  var nstr = ""; 
  for (var i = 0; i < splitStr.length; i++) {
    nstr +=  (splitStr[i].charAt(0).toUpperCase()+ splitStr[i].slice(1) + " 
    ");
  }
  console.log(nstr);
}

var strng = "this is a new demo for checking the string";
titleCase(strng);

2
Дякуємо за цей фрагмент коду, який може надати обмежену негайну допомогу. Належне пояснення було б значно поліпшити свою довгострокову цінність , показуючи , чому це хороше рішення проблеми, і зробить його більш корисним для читачів майбутніх з іншими подібними питаннями. Будь ласка, відредагуйте свою відповідь, щоб додати пояснення, включаючи припущення, які ви зробили.
iBug

0

Станом на ECMA2017 або ES8

const titleCase = (string) => {
  return string
    .split(' ')
    .map(word => word.substr(0,1).toUpperCase() + word.substr(1,word.length))
    .join(' ');
};

let result = titleCase('test test test');
console.log(result);

Пояснення:
1. Спочатку ми передаємо рядок "test test test" нашій функції "titleCase".
2. Ми розділяємо рядок на просторовій основі, таким чином, результат першої функції "split" буде ["test", "test", "test"]
3. Оскільки ми отримали масив, ми використовували функцію map для маніпулювання кожним словом у масиві. Ми пишемо великі літери першим символом і додаємо до нього залишився символ.
4. В останньому, ми приєднуємося до масиву, використовуючи пробіл, коли ми розділяємо рядок на sapce.


Я думаю, що вам чогось не вистачає на самому початку до розколу, і це так toLowerCase().
ArchNoob

@ArchNoob, так, ми можемо додати toLowerCase () перед розділенням. Але це повністю залежить від випадку використання, наприклад, якщо ми хочемо вивести "TeSt Test" для входу "teSt test", у цьому випадку ми не можемо додати toLowerCase ().
Pulkit Aggarwal

0

function titleCase(str) {
  //First of all, lets make all the characters lower case
  let lowerCaseString = "";
  for (let i = 0; i < str.length; i++) {
    lowerCaseString = lowerCaseString + str[i].toLowerCase();
  }
  //Now lets make the first character in the string and the character after the empty character upper case and leave therest as it is
  let i = 0;
  let upperCaseString = "";
  while (i < lowerCaseString.length) {
    if (i == 0) {
      upperCaseString = upperCaseString + lowerCaseString[i].toUpperCase();
    } else if (lowerCaseString[i - 1] == " ") {
      upperCaseString = upperCaseString + lowerCaseString[i].toUpperCase();
    } else {
      upperCaseString = upperCaseString + lowerCaseString[i];
    }
    i = i + 1;
  }
  console.log(upperCaseString);

  return upperCaseString;
}

titleCase("hello woRLD");

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.