Как перенести строку в js

JS перенос строки: примеры и методы

JS перенос строки можно осуществить с помощью специальных символов, которые используются для обозначения перевода строки. Самыми распространенными символами являются \n и \r\n.

Например, чтобы вставить перенос строки в текстовую строку, нужно просто написать \n в том месте, где вы хотите сделать перенос строки:

js let message = "Добрый день! \nКак ваши дела? \nЖелаю хорошего дня!"; console.log(message); 

Результат выполнения этого кода будет выглядеть так:

 Добрый день! Как ваши дела? Желаю хорошего дня! 

В этом примере мы использовали \n для создания трех переносов строки между фразами.

Кроме того, в JS также существуют другие символы, которые используются для управления форматированием текста. Например, символ табуляции \t используется для создания отступов, а символ возврата каретки \r используется для перемещения курсора на начало строки.

js let message = "Добрый день! \n\tКак ваши дела? \n\t\tЖелаю хорошего дня!"; console.log(message); 

Результат выполнения этого кода будет выглядеть так:

 Добрый день! Как ваши дела? Желаю хорошего дня! 

В этом примере мы использовали символ табуляции \t для создания отступов между фразами.

Делай перенос строки в javascript по правилам, без ошибок в коде

Доброго времени суток, гости блога и верные подписчики. Сегодняшняя статья посвящена разбору простенькой, но полезной темы, а именно «Перенос строки в JavaScript». Вроде кажется, что в данном вопросе не могут возникнуть какие-либо проблемы. Однако это не так. Из-за привередливости и особенностей некоторых инструментов языка JS перенос текста может выполнятся по-разному.

Поэтому я расскажу вам, как осуществить перенос текстового контента на новую строку в операции alert, как удобно записывать код в программе, какие вспомогательные инструменты понадобятся при работе с document.write (), а также при использовании DOM команд и объектов. Ну что ж, вперед за дело!

Редактирование программного кода

Иногда возникают такие ситуации, когда в скрипте после выполнения какого-то условия необходимо вставить определенный кусок html-кода. Однако просто разрывать строку нажатием Enter нельзя. Для этого существует несколько вариантов.

Первый вариант – это использование символа обратного слеша (\). Согласитесь, это очень удобный и быстрый метод для структурирования кода.

1 2 3 4 5 6 7 8 9 10

  
Поздравляем! Вам пришла открытка!
 
 

Поздравляем! Вам пришла открытка!

//некое условие выполнилось и поэтому необходимо добавить ссылку document.getElementById(«demo2″).innerHTML =»\ Нажми на меня»

Второй вариант – это разрыв выполняемого кода при помощи знака плюса «+». Этот метод используется и в других языках программирования, поэтому встречается часто также и в JavaScript. Скрипт в такой ситуации будет выглядеть следующим образом:

1 2 3 4 5 6

Перенос слов в alert ()

Вот тут все достаточно просто. Самый привычный и удобный способ переноса текста на новую строку, который также используется в C-подобных языках, JSON, Java и других. Стоит только вспомнить специальные символы и их обозначения.

Чаще всего для описываемого случая используют Escape-последователей перевода строки (\n) или же возврата каретки (\r). Обо всех символах можно почитать по ссылке.

Рассмотрите следующий пример.

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

Хитро передаем строки через команды DOM

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

1 2 3 4 5 6 7 8 9 10 11 12

  " + str2 + "
"; 

var str1 = ‘Я Карлсон, который живет на крыше!’; var str2 = «И я очень люблю варенье!»; document.getElementById(«person»).innerHTML = str1+ «
» + str2 + «
«;

Помимо этого, можно использовать другой парный элемент – . Данный тег позволяет сохранять все пробельные символы в том количестве, в котором их задал девелопер. Однако он преобразует шрифт текстового контента в моноширный. Таким образом, измененная программа будет выглядеть вот так:

1 2 3 4 5 6 7 8 9

  "+ str1 +"\n "+ str2 +"

var str1 = ‘Я Карлсон, который живет на крыше!’; var str2 = «И я очень люблю варенье!»; document.getElementById(«person»).innerHTML =»»+ str1 +»\n «+ str2 +»

String.prototype.replace()

Метод replace() возвращает новую строку с некоторыми или всеми сопоставлениями с шаблоном, заменёнными на заменитель. Шаблон может быть строкой или регулярным выражением, а заменитель может быть строкой или функцией, вызываемой при каждом сопоставлении.

Синтаксис

str.replace(regexp|substr, newSubStr|function[, flags])

Параметры

Объект регулярного выражения RegExp . Сопоставление заменяется возвращаемым значением второго параметра.

Строка, заменяемая на newSubStr . Обратите внимание, будет заменено только первое вхождение искомой строки.

Строка, заменяющая подстроку из первого параметра. Поддерживает несколько специальных шаблонов замены; смотрите ниже раздел Передача строки в качестве второго параметра.

Функция, вызываемая для создания новой подстроки (помещаемой вместо подстроки из первого параметра). Аргументы, передаваемые функции, описаны ниже в разделе Передача функции в качестве второго параметра.

Обратите внимание: аргумент flags не работает в ядре v8 (движок JavaScript в Chrome и NodeJs). Строка, задающая комбинацию флагов регулярного выражения. Параметр flags в методе String.prototype.replace() является нестандартным расширением. Вместо использования этого параметра используйте объект RegExp с соответствующими флагами. Значение этого параметра, если он используется, должно быть строкой, состоящей из одного или более следующих символов, следующим образом влияющих на обработку регулярного выражения:

сопоставление по нескольким строкам

«липкий» поиск, сопоставление начинается с текущей позиции в строке

Возвращаемое значение

Новая строка с некоторыми или всеми сопоставлениями шаблона, заменёнными на заменитель.

Описание

Этот метод не изменяет объект String , на котором он вызывается. Он просто возвращает новую строку.

Для выполнения глобального поиска и замены либо включите флаг g в регулярное выражение, либо, если первый параметр является строкой, включите флаг g в параметр flags .

Передача строки в качестве второго параметра

строка замены может включать следующие специальные шаблоны замены:

Шаблон	Замена
$$	Вставляет символ доллара «$».
$&	Вставляет сопоставившуюся подстроку.
$`	Вставляет часть строки, предшествующую сопоставившейся подстроке.
$’	Вставляет часть строки, следующую за сопоставившейся подстрокой.
$n или $nn	Символы n или nn являются десятичными цифрами, вставляет n-ную сопоставившуюся подгруппу из объекта RegExp в первом параметре.

Передача функции в качестве второго параметра

В качестве второго параметра вы можете передать функцию. В этом случае функция будет выполнена после произошедшего сопоставления. Результат вызова функции (её возвращаемое значение) будет использоваться в качестве строки замены (обратите внимание: описанные выше специальные шаблоны замены в этом случае не применяются). Обратите внимание, что функция будет вызвана несколько раз для каждого полного сопоставления, если регулярное выражение в первом параметре является глобальным.

Функция принимает следующие аргументы:

Возможное имя	Получаемое значение
match	Сопоставившаяся подстрока (соответствует шаблону замены $& , описанному выше).
p1, p2, .	n-ная сопоставившаяся подгруппа из объекта RegExp в первом параметре метода replace() (соответствует шаблонам замены $1 , $2 и так далее, описанным выше). Например, если в качестве шаблона передано регулярное выражение /(\a+)(\b+)/ , параметр p1 будет значение сопоставления с подгруппой \a+ , а параметр p2 — с подгруппой \b+ .
offset	Смещение сопоставившейся подстроки внутри всей рассматриваемой строки (например, если вся строка равна ‘abcd’ , а сопоставившаяся подстрока равна ‘bc’ , то этот аргумент будет равен 1).
string	Вся рассматриваемая строка.

Точное число аргументов будет зависеть от того, был ли первым аргументом объект RegExp и, если был, сколько подгрупп в нём определено.

Следующий пример установит переменную newString в значение ‘abc — 12345 — #$*%’ :

function replacer(match, p1, p2, p3, offset, string)  // p1 - не цифры, p2 - цифры, p3 - не буквы и не цифры return [p1, p2, p3].join(" - "); > var newString = "abc12345#$*%".replace(/([^\d]*)(\d*)([^\w]*)/, replacer); 

Примеры

Пример: использование флагов global и ignore с методом replace()

В следующем примере регулярное выражение включает флаги для глобального поиска и игнорирования регистра, которые позволяют методу replace() заменить все вхождения слова «яблоки» в строке на слово «апельсины».

var re = /яблоки/gi; var str = "Яблоки круглые и яблоки сочные."; var newstr = str.replace(re, "апельсины"); console.log(newstr); // апельсины круглые и апельсины сочные. 

Пример: передача регулярного выражения в метод replace()

В следующем примере в метод replace() передаётся регулярное выражение вместе с флагом игнорирования регистра.

// Ночь перед Рождеством, Xmas - сокращение для Christmas var str = "Twas the night before Xmas. "; var newstr = str.replace(/xmas/i, "Christmas"); console.log(newstr); // Twas the night before Christmas. 

Пример выведет строку ‘Twas the night before Christmas. ‘

Пример: смена местами слов в строке

Следующий скрипт меняет местами слова в строке. В качестве текста замены он использует шаблоны замены $1 и $2 .

var re = /([А-ЯЁа-яё]+)\s([А-ЯЁа-яё]+)/; var str = "Джон Смит"; var newstr = str.replace(re, "$2, $1"); console.log(newstr); // Смит, Джон 

Пример выведет строку ‘Смит, Джон’.

Пример: использование функции для изменения сопоставившихся символов

В этом примере все входящие в строку (латинские) буквы в верхнем регистре преобразуются в нижний регистр, а перед самой буквой вставляется дефис. Здесь важно то, что прежде чем элемент вставится в качестве замены, над ним нужно провести дополнительные преобразования.

Функция замены своим параметром принимает сопоставившийся кусок и перед возвратом использует его для преобразования регистра и соединения с дефисом.

function styleHyphenFormat(propertyName)  function upperToHyphenLower(match)  return "-" + match.toLowerCase(); > return propertyName.replace(/[A-Z]/g, upperToHyphenLower); > 

Вызов styleHyphenFormat(‘borderTop’) вернёт строку ‘border-top’.

Поскольку мы хотим провести дополнительные преобразования результата сопоставления до того, как будет использована окончательная подстановка, мы должны использовать функцию. Это заставляет нас принудительно вычислить сопоставление перед использование метода toLowerCase() . Если бы мы попытались использовать сопоставление без функции, метод toLowerCase() не сработал бы.

var newString = propertyName.replace(/[A-Z]/g, "-" + "$&".toLowerCase()); // не работает 

Происходит это потому, что сначала часть ‘$&’.toLowerCase() вычисляется в строковый литерал (результат по-прежнему равен ‘$&’ ), а только потом его символы используются в качестве шаблона.

Пример: замена градусов по Фаренгейту на эквивалент в градусах по Цельсию

В следующем примере градусы по Фаренгейту заменяются на эквивалентные градусы по Цельсию. Градусы по Фаренгейту должны быть числом, оканчивающимся на букву F. Функция возвращает количество градусов по Цельсию, оканчивающиеся на букву C. Например, если входное число равняется 212F, функция вернёт 100C. Если число равняется 0F, функция вернёт -17.77777777777778C.

Регулярное выражение test сопоставляется с любым числом, оканчивающимся на букву F. Количество градусов по Фаренгейту передаётся в функцию через её второй параметр, p1 . Функция переводит градусы по Фаренгейту, переданные в виде строки в функцию code>f2c(), в градусы по Цельсию. Затем функция f2c() возвращает количество градусов по Цельсию. Эта функция работает примерно так же, как и флаг s///e в Perl.

function f2c(x)  function convert(str, p1, offset, s)  return ((p1 - 32) * 5) / 9 + "C"; > var s = String(x); var test = /(\d+(?:\.\d*)?)F\b/g; return s.replace(test, convert); > 

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

Следующий пример принимает строку шаблона и преобразует её в массив объектов.

Входные данные:

Строка, состоящая из символов x , — и _

x-x_ x---x---x---x--- x-xxx-xx-x- x_x_x___x___x___

Выходные данные:

Массив объектов. Символ ‘x’ означает состояние ‘on’ , символ ‘-‘ (дефис) означает состояние ‘off’ , а символ ‘_’ (нижнее подчёркивание) означает продолжительность состояния ‘on’ .

[  on: true, length: 1 >,  on: false, length: 1 >,  on: true, length: 2 > . ] 

Код:

var str = "x-x_"; var retArr = []; str.replace(/(x_*)|(-)/g, function (match, p1, p2)  if (p1)  retArr.push( on: true, length: p1.length >); > if (p2)  retArr.push( on: false, length: 1 >); > >); console.log(retArr); 

Этот код сгенерирует массив из трёх объектов в описанном формате без использования цикла for .

Спецификации

Specification
ECMAScript Language Specification # sec-string.prototype.replace

Совместимость с браузерами

BCD tables only load in the browser

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

• String.prototype.match()
• RegExp.prototype.exec()
• RegExp.prototype.test()

Перенос строки через JavaScript

То есть, старался опираться на который в html переносит строку, но здесь, в моем случае воспринимается как обыкновенный текст. Как переносить каждое новое сообщение на новую строку?

Отслеживать
задан 6 июн 2019 в 12:02
Максим Закревский Максим Закревский
347 1 1 золотой знак 5 5 серебряных знаков 14 14 бронзовых знаков
делайте по блоку на сообщение
6 июн 2019 в 12:04
Как создать блок через JS подскажите пожалуйста
6 июн 2019 в 12:09

В каком html элементе делаете? Быть может, он выводит все, как чистый текст? Тогда \r\n вместо
поможет.

6 июн 2019 в 12:09
Если чат находится в $(«#chat»).append(»
6 июн 2019 в 12:16
Все будет работать, если вы будете использовать innerHtml )
6 июн 2019 в 13:02

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

По поводу Вашего вопроса — вы устанавливаете textContent тег
в нем не сработает.

Я бы Вам советовал добавлять каждое сообщение отдельным элементом, так проще сделать оформление или анимацию для сообщений, если это конечно требуется

let chat = document.getElementById("chat"); setInterval(e => < addMessage(Math.random().toString(36).substring(2)); chat.childNodes.length >= 5 && removeFirstMessage(); >, 1000) function addMessage(newMsg) < let block = document.createElement('div'); block.classList.add('block'); block.style.backgroundColor = `hsl($,55%,85%)`; block.textContent = newMsg; setTimeout(e => block.style.opacity = 1); chat.append(block); > function removeFirstMessage() < chat.firstChild.style.opacity = 0; let h = chat.firstChild.getBoundingClientRect().height; chat.firstChild.style.marginTop = `-$px`; // 5 - margin setTimeout(e => chat.firstChild.remove(), 500); >