Как сделать заглавной каждую букву в слове (JS) - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Как сделать заглавной каждую букву в слове (JS), kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel HTML и CSS Дополнение, Artikel javascript, Artikel web, Artikel блог, Artikel Лайфхаки, Artikel сайт, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Как сделать заглавной каждую букву в слове (JS)
link : Как сделать заглавной каждую букву в слове (JS)

Baca juga


Как сделать заглавной каждую букву в слове (JS)

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

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

Пишу два метода. Первый - чистый 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.

Как изменять размер шрифта сайта пользователем.
Изменить цвет фона и текста по желанию посетителя сайта.                                                                                                                                                             


Demikianlah Artikel Как сделать заглавной каждую букву в слове (JS)

Sekianlah artikel Как сделать заглавной каждую букву в слове (JS) kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Как сделать заглавной каждую букву в слове (JS) dengan alamat link https://dev-create.blogspot.com/2018/02/js.html