Заглавные слова в строке


183

Каков наилучший подход к использованию заглавных букв в строке?


66
Если это для отображения, используйте CSS. text-transform:capitalize;,
Kennytm

3
это должно использоваться для установки атрибута "title" для элементов DOM. нет CSS :)
vsync

1
Кроме того, я задал этот вопрос, хотя и знаю решение, просто потому, что пытался найти его на этом сайте и не смог найти достойного решения, поэтому добавил его для документации.
вс

1
@KennyTM: text-transform в действительности не будет использовать заглавные буквы форм, все значения будут представлены заглавными буквами, но будут отправлены на сервер как есть.
Марко Демайо

8
@ Марко: Да, именно поэтому я сказал: «Если это для отображения».
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 () {вернуть this.toLowerCase (). Replace (/ (?: ^ | \ S) \ S / g, function (a) {return a.toUpperCase ();}); }; **
SuryaPavan

1
Пожалуйста, не изменяйте прототипы существующих объектов.
Ашерер

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/… Я также создал его прототип.
Марко Демайо

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
К кому это может относиться: неутешительный ответ stackoverflow.com/questions/2332811/capitalize-words-in-string/… теперь лучший ответ здесь.
Марко Демайо

4

Поскольку все дали вам ответ на вопрос JavaScript, который вы просили, я добавлю, что свойство CSS text-transform: capitalizeсделает именно это.

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


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

Да, я знаю этот атрибут CSS, но он мне нужен для атрибута title для элементов dom, и у него нет CSS, как вы, возможно, знаете.
vsync

4

Джон Резиг (из известной компании jQuery) перенес сценарий 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
Я не являюсь поклонником прототипирования таким способом, потому что мои сценарии иногда являются сторонними встраиваниями на других сайтах, и это может вызвать проблемы при работе с глобальным объектом, таким как "String" ... поэтому я предпочитаю вместо этого "функционировать".
Вс

1
В этом прелесть прототипа (не тот, который вы скачали). Это стандарт в javascript и работает во всех браузерах.
Бухаке Синди

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

1
@vsync, вы всегда можете проверить это. if (object.capitalize) {...} else {String.prototype.capitalize = function()....}где объект имеет тип String. Так что все довольно просто.
Бухаке Синди

4

Ответ Иво хорош, но я предпочитаю не совпадать, \wпотому что нет необходимости использовать 0-9 и AZ. Мы можем игнорировать их и совпадать только по аз.

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

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


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

@vsync, который кажется довольно резким. это оптимизация к принятому ответу. /\b\w/gтакже не подходит для неанглийских букв. Не все имеют дело с юникодными символами, и это поможет тем, кто хочет этого не делать.
Большие деньги

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% решений здесь, какой Monkeypatch String вы фактически запустите в производство? Или, может быть, запутанные выражения регулярных выражений? С этим гораздо легче рассуждать, верно? Имхо абсолютно нет! Также сказать, что никто не поймет это довольно субъективное утверждение. Также для этого вы сказали, что это кусочек кода (больше возможностей, но здесь это не так). Как так, что это измельчено и мое решение никто не поймет? Вы не сможете распутать эти регулярные выражения, не теряя часов.
падает

Этот код был написан самим г-ном Резигом и не должен подвергаться сомнению. С другой стороны, вам не хватает доверия из-за вашей анонимности. Несмотря на это, решение 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 («Второй в программе Javascript»));

Вывод:

Çao 2-я внутри Javascript программа


1
Этот способ потребляет много ресурсов процессора. JavaScript не изменяет примитивные значения, что подразумевает создание нового при каждом выполнении операции. Лучше использовать нативные функции, такие как «заменить», например, gratia.
Даниэль Бандейра

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

Мне нравится идти с легким процессом. Сначала измените строку на Array для легкой итерации, затем с помощью функции 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())));
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.