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

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

19 ответов

Решение

Кратчайшая реализация заглавных слов в строке - это использование функций стрелок 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 Флаг внутри нашего регулярного выражения в любом случае не будет захватывать подгруппы.

Ура!

String.prototype.capitalize = function() {
    return this.replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); });
};

Использование:

'your string'.capitalize(); // -> 'Your String'

  • исправляет Marco Demaio, в котором первая буква с пробелом в Marco Demaio.

    ' javascript'.capitalize(); // -> ' Javascript'
    
  • может обрабатывать национальные символы и акцентированные буквы.

    'бабушка курит трубку'.capitalize();  // -> 'Бабушка Курит Трубку'
    'località àtilacol'.capitalize()      // -> 'Località Àtilacol'
    

ДОБАВИТЬ Я считаю это полезным

String.prototype.capitalize = function(lower) {
    return (lower ? this.toLowerCase() : this).replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); });
};
'javaSCrIPT'.capitalize();      // -> 'JavaSCrIPT'
'javaSCrIPT'.capitalize(true);  // -> 'Javascript'
function capitalize(s){
    return s.toLowerCase().replace( /\b./g, function(a){ return a.toUpperCase(); } );
};

capitalize('this IS THE wOrst string eVeR');

вывод: "Это худшая строка из всех"

Обновить:

Похоже, это решение заменяет мое: /questions/1346442/zaglavnyie-slova-v-stroke/1346476#1346476

Ответ, предоставленный 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() );

Краткий ES6 способ сделать это может выглядеть примерно так.

const capitalizeFirstLetter = s => s.charAt(0).toUpperCase() + s.slice(1)

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

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

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

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

Мое решение:

String.prototype.toCapital = function () {
    return this.toLowerCase().split(' ').map(function (i) {
        if (i.length > 2) {
            return i.charAt(0).toUpperCase() + i.substr(1);
        } else {
            return i;
        }
    }).join(' ');
};

Пример:

'álL riGht'.toCapital();
// Returns 'Áll Right'

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

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

Джон Резиг (из известной компании jQuery) перенес сценарий Perl, написанный Джоном Грубером, в JavaScript. Этот скрипт пишется заглавными буквами более интеллектуально, он не использует заглавные слова, например "of" и "and".

Вы можете найти его здесь: Заголовок заглавия в JavaScript

Использование 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

Если вы используете 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>

Это должно охватывать большинство основных случаев использования.

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

Изменить: Улучшена читаемость отображения.

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

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 ("2-й в программе Javascript"));

Выход:

Çao 2-я Внутри Javascript Программа

Мне нравится идти с легким процессом. Сначала измените строку на 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;
  }

Использовать этот:

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>

Этот код заглавными словами после точки:

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

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

Для этого я бы использовал регулярное выражение:

myString = '  this Is my sTring.  ';
myString.trim().toLowerCase().replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())));

Также есть 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();
  });
};

http://www.mediacollege.com/internet/javascript/text/case-capitalize.html - один из многих ответов.

Google может быть всем, что вам нужно для таких проблем.

Наивным подходом было бы разделить строку по пробелам, использовать первую букву каждого элемента результирующего массива с заглавными буквами и соединить ее вместе. Это оставляет существующую заглавную букву одной (например, HTML остается HTML и не превращается в нечто глупое, как HTML). Если вам не нужен этот эффект, перед разделением переведите всю строку в нижний регистр.

Вы можете использовать следующее для прописных слов в строке:

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;

}
Другие вопросы по тегам