Преобразовать строку в заголовок с помощью JavaScript - PullRequest
477 голосов
/ 13 октября 2008

Есть ли простой способ преобразования строки в регистр заголовков? Например. john smith становится John Smith. Я не ищу ничего сложного, такого как решение Джона Резига , просто (надеюсь) какой-то одно- или двухслойный.

Ответы [ 49 ]

678 голосов
/ 13 октября 2008

Попробуйте это:

    function toTitleCase(str) {
        return str.replace(
            /\w\S*/g,
            function(txt) {
                return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
            }
        );
    }
<form>
Input:
<br /><textarea name="input" onchange="form.output.value=toTitleCase(this.value)"  onkeyup="form.output.value=toTitleCase(this.value)"></textarea>
<br />Output:
<br /><textarea name="output" readonly onclick="select(this)"></textarea>
</form>
185 голосов
/ 07 апреля 2011

Немного более элегантный способ, адаптирующий функцию Грега Дина:

String.prototype.toProperCase = function () {
    return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
};

Назовите это как:

"pascal".toProperCase();
150 голосов
/ 16 июня 2010

Попробуйте применить стиль text-transform CSS к элементам управления.

Например: (text-transform: capitalize);

Используйте подход JS только в случае крайней необходимости.

92 голосов
/ 05 марта 2014

Вот моя версия, ИМО, она проста и элегантна.

var str = "foo bar baz"

str.split(' ')
   .map(w => w[0].toUpperCase() + w.substr(1).toLowerCase())
   .join(' ')

// returns "Foo Bar Baz"
91 голосов
/ 25 июня 2011

Вот моя функция, которая преобразует в регистр заголовков, но также сохраняет определенные аббревиатуры в верхнем и нижнем регистре в нижнем регистре:

String.prototype.toTitleCase = function() {
  var i, j, str, lowers, uppers;
  str = this.replace(/([^\W_]+[^\s-]*) */g, function(txt) {
    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
  });

  // Certain minor words should be left lowercase unless 
  // they are the first or last words in the string
  lowers = ['A', 'An', 'The', 'And', 'But', 'Or', 'For', 'Nor', 'As', 'At', 
  'By', 'For', 'From', 'In', 'Into', 'Near', 'Of', 'On', 'Onto', 'To', 'With'];
  for (i = 0, j = lowers.length; i < j; i++)
    str = str.replace(new RegExp('\\s' + lowers[i] + '\\s', 'g'), 
      function(txt) {
        return txt.toLowerCase();
      });

  // Certain words such as initialisms or acronyms should be left uppercase
  uppers = ['Id', 'Tv'];
  for (i = 0, j = uppers.length; i < j; i++)
    str = str.replace(new RegExp('\\b' + uppers[i] + '\\b', 'g'), 
      uppers[i].toUpperCase());

  return str;
}

Например:

"TO LOGIN TO THIS SITE and watch tv, please enter a valid id:".toTitleCase();
// Returns: "To Login to This Site and Watch TV, Please Enter a Valid ID:"
32 голосов
/ 26 октября 2017

Я предпочитаю следующее над другими ответами. Он соответствует только первой букве каждого слова и заглавными буквами. Более простой код, легче для чтения и меньше байтов. Он сохраняет существующие заглавные буквы для предотвращения искажений аббревиатур. Однако вы всегда можете сначала вызвать toLowerCase() в вашей строке.

function title(str) {
  return str.replace(/(^|\s)\S/g, function(t) { return t.toUpperCase() });
}

Вы можете добавить это к вашему прототипу строки, что позволит вам 'my string'.toTitle() следующим образом:

String.prototype.toTitle = function() {
  return this.replace(/(^|\s)\S/g, function(t) { return t.toUpperCase() });
}
16 голосов
/ 19 декабря 2011

Без использования регулярных выражений только для справки:

String.prototype.toProperCase = function() {
  var words = this.split(' ');
  var results = [];
  for (var i=0; i < words.length; i++) {
      var letter = words[i].charAt(0).toUpperCase();
      results.push(letter + words[i].slice(1));
  }
  return results.join(' ');
};

'john smith'.toProperCase();
15 голосов
/ 13 ноября 2010

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

/**
 * @param String str The text to be converted to titleCase.
 * @param Array glue the words to leave in lowercase. 
 */
var titleCase = function(str, glue){
    glue = (glue) ? glue : ['of', 'for', 'and'];
    return str.replace(/(\w)(\w*)/g, function(_, i, r){
        var j = i.toUpperCase() + (r != null ? r : "");
        return (glue.indexOf(j.toLowerCase())<0)?j:j.toLowerCase();
    });
};

Надеюсь, это поможет вам.

редактировать

Если вы хотите обработать начальные связующие слова, вы можете отслеживать эту w / еще одну переменную:

var titleCase = function(str, glue){
    glue = !!glue ? glue : ['of', 'for', 'and', 'a'];
    var first = true;
    return str.replace(/(\w)(\w*)/g, function(_, i, r) {
        var j = i.toUpperCase() + (r != null ? r : '').toLowerCase();
        var result = ((glue.indexOf(j.toLowerCase()) < 0) || first) ? j : j.toLowerCase();
        first = false;
        return result;
    });
};
14 голосов
/ 24 декабря 2013

Это работает только для строк из одного слова, но это то, что мне нужно:

'string'.replace(/^[a-z]/, function (x) {return x.toUpperCase()}) // String

JSFiddle: https://jsfiddle.net/simo/gou2uhLm/

14 голосов
/ 28 февраля 2016

Если регулярное выражение, используемое в приведенных выше решениях, вводит вас в заблуждение, попробуйте следующий код:

function titleCase(str) {
  return str.split(' ').map(function(val){ 
    return val.charAt(0).toUpperCase() + val.substr(1).toLowerCase();
  }).join(' ');
}
...