Одни из самых простых текстовых операций JavaScript — преобразования из строчных букв в прописные и обратно. Преобразование только первых букв слов в прописные — это более сложный и пока менее общепринятый, но вполне работоспособный метод. Во многих случаях нет необходимости в использовании JavaScript для этих действий: если содержимое будет находиться только на веб-странице, проще и производительней преобразовывать текст с помощью CSS.

Но у кода CSS есть свои ограничения: он может быть использован для задания стилей только тексту, постоянно присутствующему на веб-странице, такому как абзацы и заголовки, ссылки и так далее, и не может влиять на текст в значениях атрибутов, таких как title (название) и alt (описание). Если нужно оформить текст, перед тем как, например, занести его в базу, то использование JavaScript, возможно, вместе с PHP и атрибутом HTML5 autocapitalize (автоматически преобразовывать в прописную букву) может быть отличным вариантом.

Прописные буквы

С использованием JavaScript это можно сделать так:

var sourceText = "To see a World in a Grain of Sand";
console.log(sourceText.toUpperCase());
> TO SEE A WORLD IN A GRAIN OF SAND

Альтернатива с использованием кода CSS, если текст находится в элементе с идентификатором #auguries1:

#auguries1 { text-transform: uppercase; }

Строчные буквы

В  JavaScript для этого можно воспользоваться способом toLowerCase(), показанным ниже на примере, подобном предыдущему:

var sourceText = "And a Heaven in a Wild Flower";
sourceText = sourceText.toLowerCase();
console.log(sourceText);
> and a heaven in a wild flower

Альтернатива с использованием кода CSS, если текст находится в элементе класса .auguries2:

.auguries2 { text-transform: lowercase; }

Преобразование только первых букв слов в прописные

Преобразование только первых букв всех слов в прописные в названиях, особенно в английском языке делается с помощью следующей функции JavaScript:

function toTitleCase(str) {
    return str.replace(/[^-'\s]+/g, function(word) { return word.replace(/^./, function(first) { return first.toUpperCase(); }); }); }   var concertTitle = "live-alive in łódź"; console.log(toTitleCase(concertTitle)); > Live-Alive In Łódź

Это очень развитая функция, правильно преобразовывающая буквы после диакритических символов и дефисов.

Альтернатива с использованием кода CSS, если нужно преобразовать все первые буквы во всех словах в элементах заголовков первого уровня:

h1 { text-transform: capitalize; }

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

String.prototype.toSentenceCase = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

Чтобы показать его в консоли:

var auguries = "hold infinity in the palm of your hand";
console.log(auguries.toSentenceCase());
> Hold infinity in the palm of your hand

Альтернатива с использованием кода CSS, если нужно, например, преобразовать первую букву каждого абзаца, использует сочетание селекторов:

p:first-letter { text-transform: uppercase; }

В примерах использованы строки стихов Уильяма Блейка из произведения «Прорицания невинности» (William Blake’s Auguries of Innocence).

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание простых media queries для печати
• Создание эффекта набора текста
• Качественные печатные версии веб-страниц на фильтрах CSS