Доброго времени суток, гости блога и верные подписчики. Сегодняшняя статья посвящена разбору простенькой, но полезной темы, а именно «Перенос строки в JavaScript». Вроде кажется, что в данном вопросе не могут возникнуть какие-либо проблемы. Однако это не так. Из-за привередливости и особенностей некоторых инструментов языка JS перенос текста может выполнятся по-разному.
Поэтому я расскажу вам, как осуществить перенос текстового контента на новую строку в операции alert, как удобно записывать код в программе, какие вспомогательные инструменты понадобятся при работе с document.write (), а также при использовании DOM команд и объектов. Ну что ж, вперед за дело!
Редактирование программного кода
Иногда возникают такие ситуации, когда в скрипте после выполнения какого-то условия необходимо вставить определенный кусок html-кода. Однако просто разрывать строку нажатием Enter нельзя. Для этого существует несколько вариантов.
Первый вариант – это использование символа обратного слеша (\). Согласитесь, это очень удобный и быстрый метод для структурирования кода.
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <body> <p>Поздравляем! Вам пришла открытка!</p> <p id="demo2"></p> <script> //некое условие выполнилось и поэтому необходимо добавить ссылку document.getElementById("demo2").innerHTML ="\ Нажми на меня<\/a>" </script> </body> |
Второй вариант – это разрыв выполняемого кода при помощи знака плюса «+». Этот метод используется и в других языках программирования, поэтому встречается часто также и в JavaScript. Скрипт в такой ситуации будет выглядеть следующим образом:
1 2 3 4 5 6 | <script> //некое условие выполнилось и поэтому необходимо добавить ссылку document.getElementById("demo2").innerHTML ="<a href="+ "'https://cs7052.vk.me/c540100/v540100226/1eff5/6ZQuKdFyLvo.jpg'>"+ "Нажми на меня<\/a>" </script> |
Перенос слов в alert ()
Вот тут все достаточно просто. Самый привычный и удобный способ переноса текста на новую строку, который также используется в C-подобных языках, JSON, Java и других. Стоит только вспомнить специальные символы и их обозначения.
Чаще всего для описываемого случая используют Escape-последователей перевода строки (\n) или же возврата каретки (\r). Обо всех символах можно почитать по ссылке.
Рассмотрите следующий пример.
<script>
alert («Первый\nВторой»);
alert («Третий\rЧетвертый»);
</script>
Результат выполнения программы, отображенный на экране, будет выглядеть идентично.
Хитро передаем строки через команды DOM
Вот теперь пришло время разобрать добавление строк в html-файл c учетом переносов. Для этого можно воспользоваться специальным тегом
, к примеру, вот так:
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <body> <p id="person"></p> <script> var str1 = 'Я Карлсон, который живет на крыше!'; var str2 = "И я очень люблю варенье!"; document.getElementById("person").innerHTML = str1+ "<br/><b>" + str2 + "</b><br/>"; </script> </body> |
Помимо этого, можно использовать другой парный элемент – <pre>. Данный тег позволяет сохранять все пробельные символы в том количестве, в котором их задал девелопер. Однако он преобразует шрифт текстового контента в моноширный. Таким образом, измененная программа будет выглядеть вот так:
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <body> <h2 id="person"></h2> <script> var str1 = 'Я Карлсон, который живет на крыше!'; var str2 = "И я очень люблю варенье!"; document.getElementById("person").innerHTML ="<pre>"+ str1 +"\n "+ str2 +" |
Спасибо. Все просто и понятно.