Наиболее частый вопрос с которым сталкиваются начинающие программисты, студенты и просто блогеры - как сделать заглавной первую букву в каждом слове текста с помощью java script.
Вопрос простой, но часто вызывает затруднения. В интернете много ответов - как сделать заглавной первую букву в слове, но не каждую первую в предложении. Поэтому я решил специально написать один пост, для того, чтобы раз и навсегда решить этот вопрос.
Пишу два метода. Первый - чистый JavaScript (без jQuery) и второй метод с jQuery.
Очень часто бывают такие вопросы от блогеров, на собеседованиях и вообще, знать это полезно.
Без долгих вступлений.
В этом примере мы обращаемся к части текста, которая заключена в блок с
Можете убрать кнопку. Сделать так, что функция будет запускаться сразу после загрузки документа и менять буквы.
Для этого вам стоит только добавить
Или так:
Второй случай предпочтительнее, потому что полностью изолирует ваш код от исходного кода страницы. Не будет путаницы с именами переменных и функций.
Посмотреть готовый пример можно codepen
В этом примере первая функция будет делать заглавной только первую букву, а вторая, первую букву в каждом слове
Внутри кода даны исчерпывающие комментарии. Вы так же можете изменить и этот вариант кода, как и первый, только не забывайте о том, что теперь вы можете сделать выборку с помощью jQuery. Например -
Скрипт можно разместить в отдельном файле, но подключить его в документе нужно ниже подключения jQuery.
Посмотреть готовый пример можно codepen
Изменить цвет фона и текста по желанию посетителя сайта.
Вопрос простой, но часто вызывает затруднения. В интернете много ответов - как сделать заглавной первую букву в слове, но не каждую первую в предложении. Поэтому я решил специально написать один пост, для того, чтобы раз и навсегда решить этот вопрос.
Пишу два метода. Первый - чистый JavaScript (без jQuery) и второй метод с jQuery.
Очень часто бывают такие вопросы от блогеров, на собеседованиях и вообще, знать это полезно.
Без долгих вступлений.
Вариант 1 - на чистом JavaScript
<body>
<div id="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iure aliquid perferendis assumenda necessitatibus dolorem aperiam inventore, est, consectetur ex? Quia, omnis illo dignissimos quas iusto cumque, culpa laboriosam laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio maxime consequatur necessitatibus, impedit sint repellendus esse? Architecto facere quibusdam nobis repellendus est a corrupti explicabo nemo. Nostrum architecto ullam maxime.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus velit eligendi quisquam harum ut perspiciatis illum quae vero, modi magni esse non vitae, quibusdam laudantium, a repellat adipisci sed dicta.</p>
<button type="button" onclick=" UpperFirstLetter()">Click Me</button>
</div>
<script>
function UpperFirstLetter(){
var textArray = (document.getElementById('text').innerHTML).split(' ');
var UpperText = [];
for(var i = 0; i < textArray.length; i++){
var word = textArray[i][0].toUpperCase() + textArray[i].slice(1);
UpperText.push(word);
}
document.getElementById('text').innerHTML = UpperText.join(" ");
}
// UpperFirstLetter();
</script>
</body>
В этом примере мы обращаемся к части текста, которая заключена в блок с
id = "text". Вы можете изменить это по собственному усмотрению, изменив первую строку скрипта var textArray = (document.getElementById('text').innerHTML).split(' ');
на другой "выборщик" - например на querySelector('здесь ваш класс или тэг').Можете убрать кнопку. Сделать так, что функция будет запускаться сразу после загрузки документа и менять буквы.
Для этого вам стоит только добавить
UpperFirstLetter(); перед закрывающим тегом </script>(в коде выше - закомментировано // UpperFirstLetter();) и конечно же удалить кнопку button из html кода.Без jQuery
Здесь код функции window.onload = function () { Здесь "запуск" Например UpperFirstLetter(); };
Или так:
window.onload=function (){
(function (){
Здесь "Весь ваш код"
})();
};
Второй случай предпочтительнее, потому что полностью изолирует ваш код от исходного кода страницы. Не будет путаницы с именами переменных и функций.
В случае с jQuery код нужно поместить внутрь функции:
$(document).ready(function() {
Здесь ваш код с "запуском"
});
Посмотреть готовый пример можно codepen
See the Pen UpperEachLetWithoutJQ by YaroslavW (@YaroslavW) on CodePen.
Второй вариант с jQuery
В этом примере первая функция будет делать заглавной только первую букву, а вторая, первую букву в каждом слове
<body>
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. odio maxime consequatur necessitatibus, impedit sint repellendus esse? architecto facere quibusdam nobis repellendus est a corrupti explicabo nemo. nostrum architecto ullam maxime.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus velit eligendi quisquam harum ut perspiciatis illum quae vero, modi magni esse non vitae, quibusdam laudantium, a repellat adipisci sed dicta.</p>
<button type="button" class="first">First Word Upper</button>
<button type="button" class="second">Each Word Upper</button>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
// Выводит первую заглавную букву
$("button.first").on("click", function(){
var firstLetter = $("p").text()[0].toUpperCase();
$("p").html(firstLetter + $("p").text().slice(1));
});
// Выводит заглавную букву у каждого слова
$("button.second").on("click", function(){
var names = $("p").text();
var arr = names.split(' '); //получаем массив из строки.
var result = []; // +
$.each(arr, function(i){
// добавляем заглавную букву каждому слову в массиве
var text = arr[i][0].toUpperCase()+arr[i].slice(1);
result.push(text); // +
});
$("p").html(result.join(" ")); // +
});
</script>
</body>
Внутри кода даны исчерпывающие комментарии. Вы так же можете изменить и этот вариант кода, как и первый, только не забывайте о том, что теперь вы можете сделать выборку с помощью jQuery. Например -
$("button.second") - обращение к кнопке button с классом - second.Скрипт можно разместить в отдельном файле, но подключить его в документе нужно ниже подключения jQuery.
Посмотреть готовый пример можно codepen
See the Pen UpperLettWord by YaroslavW (@YaroslavW) on CodePen.
Как изменять размер шрифта сайта пользователем.Изменить цвет фона и текста по желанию посетителя сайта.
Комментариев нет:
Отправить комментарий