Перетворити рядок у регістр заголовка за допомогою JavaScript

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

Спробуйте це:

    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>

Трохи більш елегантний спосіб адаптації функції Грега Діна:

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

Назвіть це так:

"pascal".toProperCase();

Спробуйте застосувати CSS-стиль перетворення тексту до своїх елементів керування.

наприклад: (text-transform: capitalize);

Використовуйте підхід JS лише тоді, коли це абсолютно необхідно.

Ось моя версія, IMO легко зрозуміти і елегантно.

var str = "foo bar baz"

console.log(

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

)
// returns "Foo Bar Baz"

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

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:"

Я віддаю перевагу наступному, ніж інші відповіді. Він відповідає лише першій букві кожного слова і пише його з великої літери. Простіший код, легше читати і менше байтів. Він зберігає існуючі великі літери, щоб запобігти викривленню абревіатур. Однак ви завжди можете зателефонувати 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() });
}

Приклад:

String.prototype.toTitle = function() {
  return this.replace(/(^|\s)\S/g, function(t) { return t.toUpperCase() });
}

console.log('all lower case ->','all lower case'.toTitle());
console.log('ALL UPPER CASE ->','ALL UPPER CASE'.toTitle());
console.log("I'm a little teapot ->","I'm a little teapot".toTitle());

Без використання регулярного виразу лише для довідки:

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

console.log(
  'john smith'.toProperCase()
)

Ви могли одразу toLowerCaseввести рядок, а потім лише toUpperCaseпершу букву кожного слова. Стає дуже простим 1 лайнером:

function titleCase(str) {
  return str.toLowerCase().replace(/\b(\w)/g, s => s.toUpperCase());
}

console.log(titleCase('iron man'));
console.log(titleCase('iNcrEdible hulK'));

На випадок, якщо ви переживаєте за ці слова наповнювача, ви завжди можете просто сказати функції, що не використовувати великі літери.

/**
 * @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;
    });
};

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

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

Я створив цю функцію, яка може обробляти прізвища (тому це не титульні справи), такі як "McDonald" або "MacDonald" або "O'Toole" або "D'Orazio". Однак він не обробляє німецькі та голландські імена з "ван" або "фон", які часто бувають малі ... Я вважаю, що "де" часто буває і з малих букв, таких як "Роберт де Ніро". Їх все-таки потрібно було б вирішити.

function toProperCase(s)
{
  return s.toLowerCase().replace( /\b((m)(a?c))?(\w)/g,
          function($1, $2, $3, $4, $5) { if($2){return $3.toUpperCase()+$4+$5.toUpperCase();} return $1.toUpperCase(); });
}

var toMatch = "john w. smith";
var result = toMatch.replace(/(\w)(\w*)/g, function (_, i, r) {
      return i.toUpperCase() + (r != null ? r : "");
    }
)

Здається, працює ... Перевірене вище, "швидкоплий, лисиця? / Стрибає / ^ над ^ собака ледачий ..." та "C: / програмні файли / деякий постачальник / їх 2-й додаток / file1.txt ".

Якщо ви хочете 2Nd замість другого, ви можете змінити на /([a-z])(\w*)/g .

Першу форму можна спростити як:

function toTitleCase(toTransform) {
  return toTransform.replace(/\b([a-z])/g, function (_, initial) {
      return initial.toUpperCase();
  });
}

Спробуйте це

String.prototype.toProperCase = function(){
    return this.toLowerCase().replace(/(^[a-z]| [a-z]|-[a-z])/g, 
        function($1){
            return $1.toUpperCase();
        }
    );
};

Приклад

var str = 'john smith';
str.toProperCase();

Якщо ви можете використовувати бібліотеки сторонніх розробників у своєму коді, то 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'

Спробуйте це найкоротшим способом:

str.replace(/(^[a-z])|(\s+[a-z])/g, txt => txt.toUpperCase());

ES 6

str.split(' ')
   .map(s => s.slice(0, 1).toUpperCase() + s.slice(1).toLowerCase())
   .join(' ')

ще

str.split(' ').map(function (s) {
    return s.slice(0, 1).toUpperCase() + s.slice(1).toLowerCase();
}).join(' ')

Більшість цих відповідей, здається, ігнорують можливість використання метамехаракту слова межа (\ b). Більш коротка версія відповіді Грега Діна:

function toTitleCase(str)
{
    return str.replace(/\b\w/g, function (txt) { return txt.toUpperCase(); });
}

Працює для дефісів, як Джим-Боб.

Я думаю, що найпростішим є використання css.

function format_str(str) {
    str = str.toLowerCase();
    return '<span style="text-transform: capitalize">'+ str +'</span>';
}

Використовуйте /\S+/gдля підтримки діакритики:

function toTitleCase(str) {
  return str.replace(/\S+/g, str => str.charAt(0).toUpperCase() + str.substr(1).toLowerCase());
}

console.log(toTitleCase("a city named örebro")); // A City Named Örebro

Однак: " s sunhine ( y ellow)" ⇒ " S sunhine ( y ellow)"

Я хотів додати власну відповідь, оскільки мені потрібна була надійна toTitleCaseфункція, яка враховує правила граматики, перелічені тут (рекомендована стаття Google). Існують різні правила, які залежать від довжини вхідного рядка. Нижче наведено функцію + блок тестів.

Функція також консолідує пробіли та видаляє спеціальні символи (змінити регулярний вираз для ваших потреб)

toTitleCase Функція

const toTitleCase = (str) => {
  const articles = ['a', 'an', 'the'];
  const conjunctions = ['for', 'and', 'nor', 'but', 'or', 'yet', 'so'];
  const prepositions = [
    'with', 'at', 'from', 'into','upon', 'of', 'to', 'in', 'for',
    'on', 'by', 'like', 'over', 'plus', 'but', 'up', 'down', 'off', 'near'
  ];

  // The list of spacial characters can be tweaked here
  const replaceCharsWithSpace = (str) => str.replace(/[^0-9a-z&/\\]/gi, ' ').replace(/(\s\s+)/gi, ' ');
  const capitalizeFirstLetter = (str) => str.charAt(0).toUpperCase() + str.substr(1);
  const normalizeStr = (str) => str.toLowerCase().trim();
  const shouldCapitalize = (word, fullWordList, posWithinStr) => {
    if ((posWithinStr == 0) || (posWithinStr == fullWordList.length - 1)) {
      return true;
    }

    return !(articles.includes(word) || conjunctions.includes(word) || prepositions.includes(word));
  }

  str = replaceCharsWithSpace(str);
  str = normalizeStr(str);

  let words = str.split(' ');
  if (words.length <= 2) { // Strings less than 3 words long should always have first words capitalized
    words = words.map(w => capitalizeFirstLetter(w));
  }
  else {
    for (let i = 0; i < words.length; i++) {
      words[i] = (shouldCapitalize(words[i], words, i) ? capitalizeFirstLetter(words[i], words, i) : words[i]);
    }
  }

  return words.join(' ');
}

Тести одиниць для забезпечення коректності

import { expect } from 'chai';
import { toTitleCase } from '../../src/lib/stringHelper';

describe('toTitleCase', () => {
  it('Capitalizes first letter of each word irrespective of articles, conjunctions or prepositions if string is no greater than two words long', function(){
    expect(toTitleCase('the dog')).to.equal('The Dog'); // Capitalize articles when only two words long
    expect(toTitleCase('for all')).to.equal('For All'); // Capitalize conjunctions when only two words long
    expect(toTitleCase('with cats')).to.equal('With Cats'); // Capitalize prepositions when only two words long
  });

  it('Always capitalize first and last words in a string irrespective of articles, conjunctions or prepositions', function(){
    expect(toTitleCase('the beautiful dog')).to.equal('The Beautiful Dog');
    expect(toTitleCase('for all the deadly ninjas, be it so')).to.equal('For All the Deadly Ninjas Be It So');
    expect(toTitleCase('with cats and dogs we are near')).to.equal('With Cats and Dogs We Are Near');
  });

  it('Replace special characters with space', function(){
    expect(toTitleCase('[wolves & lions]: be careful')).to.equal('Wolves & Lions Be Careful');
    expect(toTitleCase('wolves & lions, be careful')).to.equal('Wolves & Lions Be Careful');
  });

  it('Trim whitespace at beginning and end', function(){
    expect(toTitleCase(' mario & Luigi superstar saga ')).to.equal('Mario & Luigi Superstar Saga');
  });

  it('articles, conjunctions and prepositions should not be capitalized in strings of 3+ words', function(){
    expect(toTitleCase('The wolf and the lion: a tale of two like animals')).to.equal('The Wolf and the Lion a Tale of Two like Animals');
    expect(toTitleCase('the  three Musketeers  And plus ')).to.equal('The Three Musketeers and Plus');
  });
});

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

"john f. kennedy".replace(/\b\S/g, t => t.toUpperCase())

Приймаючи рішення "lewax00", я створив це просте рішення, яке примушує "w" починати з простору або "w", яке починає слово, але не в змозі видалити зайві проміжні пробіли.

"SOFÍA vergara".toLowerCase().replace(/\b(\s\w|^\w)/g, function (txt) { return txt.toUpperCase(); });

Результат - "Софія Вергара".

Ось моя функція, яка піклується про наголошені символи (важливо для французької мови!), Яка може вмикати / вимикати обробку винятків, що знижують. Сподіваюся, що це допомагає.

String.prototype.titlecase = function(lang, withLowers = false) {
    var i, string, lowers, uppers;

    string = this.replace(/([^\s:\-'])([^\s:\-']*)/g, function(txt) {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    }).replace(/Mc(.)/g, function(match, next) {
        return 'Mc' + next.toUpperCase();
    });

    if (withLowers) {
        if (lang == 'EN') {
            lowers = ['A', 'An', 'The', 'At', 'By', 'For', 'In', 'Of', 'On', 'To', 'Up', 'And', 'As', 'But', 'Or', 'Nor', 'Not'];
        }
        else {
            lowers = ['Un', 'Une', 'Le', 'La', 'Les', 'Du', 'De', 'Des', 'À', 'Au', 'Aux', 'Par', 'Pour', 'Dans', 'Sur', 'Et', 'Comme', 'Mais', 'Ou', 'Où', 'Ne', 'Ni', 'Pas'];
        }
        for (i = 0; i < lowers.length; i++) {
            string = string.replace(new RegExp('\\s' + lowers[i] + '\\s', 'g'), function(txt) {
                return txt.toLowerCase();
            });
        }
    }

    uppers = ['Id', 'R&d'];
    for (i = 0; i < uppers.length; i++) {
        string = string.replace(new RegExp('\\b' + uppers[i] + '\\b', 'g'), uppers[i].toUpperCase());
    }

    return string;
}

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

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

Проблеми з великої літери першої літери кожного імені:

• Акроніми, такі як IBM, заборонено вводити, перетворюються на Ibm.

• Ім’я Макдональд перетвориться на Макдональда, що невірно, те саме, що і Макдональд.

• Імена з подвійним стволом, такі як Марі-Тонкс, перетворюються на Марі-Тонкс.

• Такі імена, як О'Коннор, перетворяться на О'Коннор.

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

• Якщо додати правило для виправлення імен за допомогою Mac, таких як MacDonald, імена перерви, такі як Macy, перетворили його на MacY.

Єдине рішення, яке ми придумали - це ніколи невірно - це використовувати великі літери, що є методом грубої сили, який, схоже, використовує і DBS.

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

ось ще одне рішення з використанням css (та javascript, якщо текст, який ви хочете перетворити, у верхньому регістрі):

html

<span id='text'>JOHN SMITH</span>

js

var str = document.getElementById('text').innerHtml;
var return_text = str.toLowerCase();

css

#text{text-transform:capitalize;}

Для тих із нас, хто боїться регулярних виразів (lol):

function titleCase(str)
{
    var words = str.split(" ");
    for ( var i = 0; i < words.length; i++ )
    {
        var j = words[i].charAt(0).toUpperCase();
        words[i] = j + words[i].substr(1);
    }
    return words.join(" ");
}

Моє одне рядкове рішення:

String.prototype.capitalizeWords = function() {
    return this.split(" ").map(function(ele){ return ele[0].toUpperCase() + ele.slice(1).toLowerCase();}).join(" ");
};

Потім ви можете викликати метод capitalizeWords()у будь-якій рядку. Наприклад:

var myS = "this actually works!";
myS.capitalizeWords();

>>> This Actually Works

Моє інше рішення:

function capitalizeFirstLetter(word) {
    return word[0].toUpperCase() + word.slice(1).toLowerCase();
}
String.prototype.capitalizeAllWords = function() {
    var arr = this.split(" ");
    for(var i = 0; i < arr.length; i++) {
        arr[i] = capitalizeFirstLetter(arr[i]);
    }
    return arr.join(" ");
};

Потім ви можете викликати метод capitalizeWords()у будь-якій рядку. Наприклад:

var myStr = "this one works too!";
myStr.capitalizeWords();

>>> This One Works Too

Альтернативне рішення на основі відповіді Грега Діна:

function capitalizeFirstLetter(word) {
    return word[0].toUpperCase() + word.slice(1).toLowerCase();
}
String.prototype.capitalizeWords = function() {
    return this.replace(/\w\S*/g, capitalizeFirstLetter);
};

Потім ви можете викликати метод capitalizeWords()у будь-якій рядку. Наприклад:

var myString = "yes and no";
myString.capitalizeWords()

>>> Yes And No

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

let str="john smith"
str=str.split(" ").map(([firstChar,...rest])=>firstChar.toUpperCase()+rest.join("").toLowerCase()).join(" ")
console.log(str)

Це ґрунтується на моєму рішенні для багаття FreeCodeCamp "Title Case" , яке вимагає, щоб ви спочатку перетворили заданий рядок у всі малі регістри, а потім перетворили кожен символ, що протікає пробілом, у верхній регістр.

Без використання регулярного вираження:

function titleCase(str) {
 return str.toLowerCase().split(' ').map(function(val) { return val.replace(val[0], val[0].toUpperCase()); }).join(' ');
}