Прописать первую букву каждого слова в строке - JavaScript

Question

Прописать первую букву каждого слова в строке - JavaScript

Что не так с этой функцией? Я потерялся, спасибо за помощь.

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

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

241

javascript string capitalize charat title-case

Источник

user5166824 15 сен '15 в 14:52

48 ответов

Решение

Вы делаете сложную вещь очень легкой. Вы можете добавить это в свой CSS:

 .capitalize {
    text-transform: capitalize;   
  }

В JavaScript вы можете добавить класс к элементу

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

192

Источник

user5035890 15 сен '15 в 14:55

Версия ES6:

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

145

Источник

user6178885 12 апр '17 в 18:24

Самый короткий One Liner (также очень быстрый):

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

120

Источник

user1602301 10 мар '20 в 05:45

Я думаю, так должно быть быстрее; потому что он не разделяет строку и не соединяет ее снова; просто используя регулярное выражение.

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

Пояснение:

(^\w{1}): соответствует первому символу строки
|: или
(\s{1}\w{1}): сопоставить один символ после одного пробела
g: сопоставить все
match => match.toUpperCase(): заменить на может принимать функцию, поэтому; заменить совпадение совпадением в верхнем регистре

61

Источник

user6157848 06 окт '19 в 09:59

Если вы можете использовать стороннюю библиотеку, тогда у 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>

38

Источник

user649388 29 дек '16 в 11:23

В ES6 однострочный ответ с использованием функции стрелки

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

23

Источник

user3411933 16 фев '19 в 08:00

Версия ES2015:

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

15

Источник

user505157 17 дек '16 в 15:43

text-transform: capitalize;

Css получил это:)

10

Источник

user4478787 07 фев '19 в 20:10

Вы можете просто использовать функцию регулярного выражения для изменения заглавных букв каждой буквы. С оптимизацией V8 JIST это должно оказаться самым быстрым и наиболее эффективным использованием памяти.

'tHe VeRy LOOong StRINg'.replace(/\b[a-z]|\B[A-Z]/g, function(x){return String.fromCharCode(x.charCodeAt(0)^32)})

Или как функция:

var autoCaps = (function(){
    var fromCharCode = String.fromCharCode;
    return function(string){
        string.replace(/\b[a-z]|\B[A-Z]/g, function(x){
            return fromCharCode(x.charCodeAt(0)^32);
        });
    }
})();

демонстрация

<input id="input" type="text" value="'tHe VeRy LOOong StRINg'" /><br /><br />
<input id="output" type="text" readonly />
<script>
(function(){
    var fromCharCode = String.fromCharCode;
    (input.oninput = function(){
      output.value = input.value.replace(
        /\b[a-z]|\B[A-Z]/g,
        function(x){return fromCharCode(x.charCodeAt(0)^32)}
      );
    })();
})();
</script>

9

Источник

user5601591 10 авг '17 в 18:05

Также хороший вариант (особенно если вы используете 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(" ");
}

7

Источник

user8222815 27 июн '17 в 21:27

Эта процедура будет обрабатывать переносимые слова и слова с апострофом.

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'Nil's"); // возвращает "Pat O'Ne's's";

5

Источник

user549492 06 ноя '16 в 23:47

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

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

5

Источник

user9909243 04 авг '20 в 14:37

Я обычно предпочитаю не использовать регулярные выражения из-за читабельности, а также стараюсь держаться подальше от циклов. Я думаю, что это вроде читабельно.

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

5

Источник

user9702918 26 апр '18 в 09:30

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

Источник

user5709756 08 сен '19 в 14:13

С Regex и обработкой специальных символов, таких какñс несколькими пробелами между ними:/(^.|\s+.)/g

4

Источник

user15690713 11 июл '22 в 21:18

Если это целесообразно, используйтеtext-transform: capitalize;Свойство CSS для преобразования текста в заглавный регистр.

Это менее затратная операция по сравнению с вариантом JavaScript в ситуациях, когда вы могли бы в равной степени полагаться на CSS для достижения того же результата.

I'm A Little Tea Potявляется результатом фрагмента ниже.

      <p style="text-transform: capitalize;">I'm a little tea pot</p>

4

Источник

user6381711 05 окт '22 в 09:28

Здесь много беспорядка !!!

Здесь однострочный

      const ucFirst = t => t.replace(/(^|\s)\w/g, c => c.toUpperCase());

Обратите внимание, что он изменяет только регистр первой буквы, вы можете использовать его так:

      alert(ucFirst('FoO bAr'.toLowerCase()));
// Foo Bar

4

Источник

user2250843 28 июл '21 в 15:44

Есть много способов добиться этого, например, вы можете попробовать зациклиться на строке или использовать встроенный JavaScript.split(),map()иjoin()

Я предпочитаю использовать регулярное выражение с методом замены, который доступен в строке

      capitalize = (str) =>  {
  return str.replace(/\b[a-z]/g, (letter) => letter.toUpperCase(););
}

определяется с помощью граничного сопоставления \b и класса символов [az] и заменяет его версией буквы в верхнем регистре с помощью функции обратного вызова.
более эффективен, потому что он перебирает символы в строке только один раз и использует регулярное выражение для определения букв, которые должны быть заглавными, что, как правило, быстрее, чем реализация той же логики с использованием циклов и манипуляций со строками.

4

Источник

user3946527 04 янв '23 в 14:13

Или это можно сделать с помощью 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");

4

Источник

user8176226 22 июл '17 в 09:44

function LetterCapitalize(str) { 
  return str.split(" ").map(item=>item.substring(0,1).toUpperCase()+item.substring(1)).join(" ")
}

4

Источник

user5370854 29 апр '19 в 05:33

Синтаксис 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')

4

Источник

user3277442 03 янв '20 в 02:20

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

Это означает, что он не обязательно преобразует слова в Titlecase, но делает именно то, что говорит заголовок вопроса: "Прописать первую букву каждого слова в строке - 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

Источник

user1097752 06 фев '19 в 18:23

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

3

Источник

user7247029 04 дек '16 в 04:25

Толстая стрелка TypeScript FTW

      export const formatTitleCase = (string: string) =>
    string
        .toLowerCase()
        .split(" ")
        .map((word) => word.charAt(0).toUpperCase() + word.substring(1))
        .join(" ");

3

Источник

user9127427 30 апр '21 в 02:57

Ниже приведен еще один способ использовать заглавные буквы в первом алфавите каждого слова в строке.

Создайте собственный метод для объекта 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());

2

Источник

user5847575 22 июл '19 в 11:43

Более компактное (и современное) переписывание предложенного решения @thingthere:

function titleCase(str) {
    return str.toLowerCase().split(' ').map(function(chunk){
        return chunk.charAt(0).toUpperCase() + chunk.substring(1);
    }).join(' ');
}
    
document.write(titleCase("I'm an even smaller tea pot"));

2

Источник

user681559 26 апр '18 в 09:44

Это прекрасный пример использования современных практик javascript для улучшения читабельности. Я еще не видел уменьшенную версию здесь, но это то, что я использую. Это и однострочный карри, и очень читабельный

      sentence
    .trim().toLowerCase()
    .split(' ')
    .reduce((sentence, word) => `${sentence} ${word[0].toUpperCase()}${word.substring(1)}`, '')
    .trim()

2

Источник

user13038629 23 июн '22 в 12:10

Вот как вы могли бы сделать это с 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

Источник

user4947422 13 ноя '18 в 15:52

      var str = "hello world"
var result = str.split(" ").map(element => {
    return element[0].toUpperCase() + element.slice(1);
});
result = result.join(" ")
console.log(result);

1

Источник

user10206094 17 фев '22 в 14:19

Другие вопросы по тегам javascript string capitalize charat title-case

user2991619 15 сен '15 в 14:56 2015-09-15 14:56 · Accepted Answer · 2015-09-15 14:56

Вы не присваиваете свои изменения массиву снова, поэтому все ваши усилия напрасны. Попробуй это:

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