Великі літери в рядку


183

Який найкращий підхід до використання великих літер у рядках?


66
Якщо він призначений для відображення, використовуйте CSS. text-transform:capitalize;.
kennytm

3
це потрібно використовувати для встановлення атрибута "title" для елементів DOM. немає CSS :)
vsync

1
Крім того, я задав це питання, хоча це рішення я знаю, тільки тому, що я намагався шукати його на цьому веб-сайті і не зміг знайти гідне рішення, тому додав його заради документації.
vsync

1
@KennyTM: текстова трансформація насправді не використовує величини значень файлів форми, усі значення будуть представлені з великої літери, але відправлені на сервер такими, якими вони є.
Марко Демайо

8
@Marco: Так, тому я сказав "Якщо це для показу".
kennytm

Відповіді:


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

capitalize(' javascript'); // -> ' Javascript'
  • може обробляти національні символи та букви з наголосом.
capitalize('бабушка курит трубку');  // -> 'Бабушка Курит Трубку'
capitalize('località àtilacol')      // -> 'Località Àtilacol'
  • може обробляти цитати та дужки.
capitalize(`"quotes" 'and' (braces) {braces} [braces]`);  // -> "Quotes" 'And' (Braces) {Braces} [Braces]

4
regexp працює на кшталт "Візьміть усіх символів, що не містять пробілів (\ S), що стоять прямо на початку рядка (^) або після будь-якого символу пробілу (\ s) та
замініть

3
Невелике вдосконалення для обробки верхніх ліній рядків :) ** String.prototype.capitalize = function () {return this.toLowerCase (). Замінити (/ (?: ^ | \ S) \ S / g, function (a) {повернути a.toUpperCase ();}); }; **
SuryaPavan

1
Будь ласка, не змінюйте прототипи існуючих об'єктів.
Ascherer

1
@ Dr.X см додаток, 'CHECK THIS OUT'.capitalize(true) -> "Check This Out". trueПараметр розуму .
зневірився

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

2
Схоже, це не працює для нордичних символів ä, ö і å. Наприклад päijät-hämeстаєPäIjäT-HäMe
Маркус Месканен

1
Це рішення не є корисним для міжнародного контенту, що містить діакритичні / нелатинські символи. EisbäRenнаприклад, це один результат.
Даніель Б.

3
Приклад з @MarkusMeskanen повинен змінитись на Päijät-Häme, але принаймні у пробілі Chrome не міститься тире (-), тому друга частина назви не пишеться з великої літери. Можна зафіксувати як /(^|\s|-)\S/g.
MiRin

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 його.
Марко Демайо

9
Мені не подобається прототипування, вона має потенціал створювати зіткнення, якщо хтось інший використовує те саме ім'я для прототипу String.
vsync

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"
зневірився

2
КОМУ ЦЕ СТОСУЄТЬСЯ: disfated відповідь stackoverflow.com/questions/2332811/capitalize-words-in-string / ... тепер краща відповідь тут.
Марко Демайо

4

Оскільки всі дали вам відповідь на JavaScript, яку ви попросили, я підкажу, що властивість CSS text-transform: capitalizeзробить саме це.

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


KennyTM побив тебе до цього. Перевірте його коментар до розділу питань. :-)
Бухаке Сінді,

Так, я знаю цей атрибут CSS, але мені це потрібно для атрибута заголовка до елементів dom, і він не має CSS як ніколи, як ви можете знати.
vsync

4

Джон Резіг (слава jQuery) переніс сценарій Perl, написаний Джоном Грубером, на JavaScript. Цей сценарій пишеться з великої літери на більш розумний спосіб, він не використовує великих літер, наприклад, "з" і "і".

Ви можете знайти його тут: Велика літера з заголовком у 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
Я не є прихильником прототипування цього способу, тому що мої сценарії іноді є сторонніми вбудованими на інших веб-сайтах, і це може спричинити проблеми зі змістом з глобальним об'єктом, таким як "String" ... тому я вважаю за краще "замінити" його замість цього.
vsync

1
Ось така краса прототипу (не прототип, який ви завантажуєте). Це стандарт у JavaScript та працює у всіх браузерах.
Buhake Sindi,

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

1
@vsync, ви завжди можете це перевірити. if (object.capitalize) {...} else {String.prototype.capitalize = function()....}де об'єкт типу String. Отже, насправді це досить просто.
Buhake Sindi

4

Відповідь Іво хороша, але я вважаю за краще не узгоджуватись, \wоскільки немає потреби використовувати величину 0-9 та AZ. Ми можемо ігнорувати ці і лише матчі на az.

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

Це той самий вихід, але я думаю, що ясніше в плані коду самодокументування.


Це буде терпіти невдачі через не англійські букви: "Är Toaletten". Ваша відповідь через кілька років після того, як було надано дуже хороший відповідь, не сприяє обговоренню ..
vsync

@vsync, що здається досить суворим. це оптимізація прийнятої відповіді. /\b\w/gтакож виходить з ладу для не англійських листів. Не всі мають справу з символами Unicode, і це допоможе тим, хто цього не хоче.
Великі гроші

1
Гаразд .. Я просто не думаю, що ви повинні використовувати це замість основної відповіді лише тому, що вам не потрібні інші мови, крім англійської. Це недостатньо хороше обґрунтування, оскільки за це не передбачено покарання для всіх персонажів ASCII, як сказано в головному запитанні
vsync

3

Якщо ви використовуєте lodash у своїй програмі JavaScript, ви можете використовувати _.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
nasatome

Це не працює: 'a áAA. bb . bbb .cc .d'.toCapital();=>a Áaa. bb . Bbb .cc .d
vsync

Я зробив це, щоб не розглядати слова з меншими двома літерами, наприклад, "з", "як".
Ерік Тацуй

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

Чи можете ви пояснити, чому ви думали, що я маю на увазі, що моя відповідь найкраща / або краща за інших? Я цього не згадував, це просто інше. Крім того, я не бачив, щоб ви залишали цей коментар в інших публікаціях, тому я дійсно не розумію його. Але для початку: він використовує модернізовані функції js (руйнування, жирова стрілка, неявне повернення), не використовує regx і це більш функціональний підхід до проблеми. Крім того, він має дуже елементарну обробку помилок і повертає порожню рядок, якщо ви передасте її одну (мені це було важливо).
Краплі

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

Ах, гаразд, так що 50% рішень, яку саме мавпа-рядок ви будете фактично вводити у виробництво? Чи, можливо, перекручені виразні вирази? Це набагато простіше міркувати, правда? Імхо абсолютно немає! Також сказати, що ніхто цього не зрозуміє, є досить суб'єктивним твердженням. Також для цього ви сказали, що це подрібнений фрагмент коду (більше функцій, але це не так) Як так, що це подрібнено, і моє рішення ніхто не зрозуміє? Ні в якому разі ви не будете розплутувати ці шрифти, не втрачаючи годин.
Краплі

Цей код написав сам пан Ресіг, і його не слід сумніватися. З іншого боку, вам не вистачає довіри через вашу анонімність. Незважаючи на те, рішення Regex коротше, працює набагато швидше, а також легко читається будь-ким, хто вивчив основи Regex. Навряд чи можна багато чого «розплутати» у цьому: /\b\w/g...
vsync

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 ('çao 2nd у програмі Javascript'));

Вихід:

2-я програма всередині Javascript


1
Цей спосіб споживає багато ресурсів процесора. JavaScript не змінює примітивні значення, що передбачає створення нового кожного разу, коли виконується операція. Краще скористатися нативними функціями на зразок "замінити", наприклад, гратіа.
Даніель Бандейра,

0

http://www.mediacollege.com/internet/javascript/text/case-capitalize.html - одна з багатьох відповідей.

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

Мені подобається їхати з легким процесом. Спочатку змініть рядок на масив для легкої ітерації, а потім за допомогою функції карти змініть кожне слово таким, яким ви хочете.

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