Перевод строки из camelCase в Camel Case на JavaScript

Быстрый ответ

Если вам необходимо преобразовать camelCase в Camel Case, используйте для этого следующий код на JavaScript:

const toTitleCase = str => str
    .replace(/(.)([A-Z])/g, '$1 $2')
    .replace(/^./, str => str.toUpperCase());

console.log(toTitleCase('camelCase')); // Вернёт: Camel Case. Просто и изящно!

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

Учет особых случаев

Иногда могут возникать особые случаи, такие как 'CSVFiles' или 'loadXMLHttpRequest', и наш код должен корректно с ними справляться:

const toTitleCase = str => str
    .replace(/(^.|[A-Z]+)([^A-Z]?)/g, (match, p1, p2) => `${p1} ${p2}`.trim())
    .replace(/^./, str => str.toUpperCase());

console.log(toTitleCase('CSVFiles'));      // Вернёт: CSV Files. Аббревиатура отделена.
console.log(toTitleCase('loadXMLHttpRequest')); // Вернёт: Load XML Http Request. Текст стал более понятным, не так ли?

Разгадка «магии»

Здесь мы используем мощное регулярное выражение, которое работает как швейцарский нож: оно учитывает как последовательности заглавных букв ([A-Z]+), так и сбрасывает лишние пробелы между словами. Благодаря этому в тексте сохраняются оригинальные аббревиатуры и инициалы.

Визуализация

Воспользуемся аналогией: каждая станция (🚉) на пути "Верблюжьего Поезда" соответствует началу нового слова или заглавной букве:

"camelCase" 🚂: [🚉c, amel, 🚉C, ase]

Затем мы вставляем пробел после каждой станции:

// Теперь пассажиры могут ясно различить отдельные слова:
"camel Case"

Обобщение

Подробнее об этом расскажет наш спикер на видео

Обработка специальных последовательностей

Для более продвинутых случаев, таких как 'parseURLAndRedirect', можно использовать функцию, которая успешно разделит строку:

const toComplexTitleCase = str => str
    .replace(/(^.|[A-Z][a-z]+)/g, ' $1')
    .replace(/ +/g, ' ')
    .trim()
    .replace(/^./, str => str.toUpperCase());

console.log(toComplexTitleCase('parseURLAndRedirect')); // Вернёт: Parse URL And Redirect. Текст стал удобнее для восприятия, не правда ли?

Использование Lodash для работы с "верблюдами"

Если стандартных возможностей JavaScript недостаточно, на помощь приходит библиотека Lodash с функцией startCase, которая без труда преобразует форматирование:

_.startCase('camelCaseString'); // Вернёт: Camel Case String

Или используйте компоновку методов для более эффективного решения:

const chainTitleCase = _.chain('anotherCamelCaseString')
    .camelCase()
    .startCase()
    .value();

console.log(chainTitleCase); // Вернёт: Another Camel Case String. Зачем усложнять, если можно решить задачу одной строкой?

Интерактивное преобразование

Если необходимо производить преобразование в режиме реального времени, достаточно будет использовать событие input:

document.querySelector('#input').addEventListener('input', (e) => {
    document.querySelector('#output').textContent = toComplexTitleCase(e.target.value);
    // Как здорово наблюдать за тем, как текст изменяется в реальном времени, не так ли?
});

Полезные материалы

1. String.prototype.replace() – JavaScript | MDN — документация на метод .replace().
2. Putting space in camel case string – Stack Overflow — обсуждения на Stack Overflow, как добавить пробелы в строку с camel case.
3. regex101: build, test, and debug regex — инструмент для создания и тестирования регулярных выражений.
4. Строки – JavaScript.Info — базовый урок по работе со строками в JavaScript.
5. Регулярные выражения – JavaScript | MDN — руководство по использованию регулярных выражений для обработки строк.