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

Перенос строки на языке Javascript

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

1. Перенос исполняемой строки кода.
2. Перенос строки, как результат выводимых данных (форматирование).

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

Для чего требуется перенос строк

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

Еще одна распространенная проблема – такой код непросто распечатать. То есть он может распечататься только в видимой части или распечатается так, что его нельзя будет прочитать.

Существует два способа переноса строки кода:

1. С помощью символа обратного слеша «\».
2. Разрыв выполняемого кода при помощи знака плюс «+».

Обратный слеш указывается исключительно внутри кавычек, тогда как символ знака «+» наоборот, лишь за пределами кавычек.

Приведем пример с символом обратного слеша:

Пример c символом знака плюс:

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

При первом типе переноса строки (\,+) на выходе (к примеру, на печать в диалоговое окно) в двух случаях будет одна строка. При втором типе (
,\n) каждый разрыв строки будет напечатан с новой строки.

How can I insert new line/carriage returns into an element.textContent?

Let’s say I want to dynamically create a new DOM element and fill up its textContent/innerText with a JS string literal.
The string is so long I would like to split it into three chunks:

The problem is, if i write

it doesn’t work, probably because the browser considers the ‘\n’ to be pure text and displays it as such (the \r doesn’t work either).

On the other hand, I could change the h1.innerHTML instead of the textContent and write:

Here the <br /> would do the job, but doing so would replace not just the text content but all the HTML content of my h1, which is not quite what I want.

Is there a simple way to solve my problem?
I wouldn’t resort to creating multiple block elements just to have the text on different lines.

14 Answers 14

I know this question posted long time ago.

I had similar problem few days ago, passing value from web service in json format and place it in table cell contentText .

Because value is passed in format, for example, «text row1\r\ntext row2» and so on.

For new line in textContent You have to use \r\n and, finally, I had to use css white-space: pre-line; (Text will wrap when necessary, and on line breaks) and everything goes fine.

Or, You can use only white-space: pre; and then text will wrap only on line breaks (in this case \r\n ).

So, there is example how to solve it with wrapping text only on line breaks :

I ran into this a while ago. I found a good solution was to use the ASCII representation of carriage returns (CODE 13). JavaScript has a handy feature called String.fromCharCode() which generates the string version of an ASCII code, or multiple codes separate by a comma. In my case, I needed to generate a CSV file from a long string and write it to a text area. I needed to be able to cut the text from the text area and save it into notepad. When I tried to use the <br /> method it would not preserve the carriage returns, however, using the fromCharCode method it does retain the returns. See my code below:

See here for more details on this method: w3Schools-fromCharCode()

See here for ASCII codes: ASCII Codes

nelek’s answer is the best one posted so far, but it relies on setting the css value: white-space: pre, which might be undesirable.

I’d like to offer a different solution, which tries to tackle the real question that should’ve been asked here:

«How to insert untrusted text into a DOM element?»

If you trust the text, why not just use innerHTML?

should be sufficient for all the reasonable cases.

If you decided you should use .textContent instead of .innerHTML, it means you don’t trust the text that you’re about to insert, right? This is a reasonable concern.

For example, you have a form where the user can create a post, and after posting it, the post text is stored in your database, and later on appended to pages whenever other users visit the relevant page.

If you use innerHTML here, you get a security breach. i.e., a user can post something like

(try to imagine that [] are <>, apparently stack overflow is appending text in unsafe ways!)

which won’t trigger an alert if you use innerHTML, but it should give you an idea why using innerHTML can have issues. a smarter user would post

which would trigger an alert for every other user that visits the page. Now we have a problem. An even smarter user would put display: none on that img style, and make it post the current user’s cookies to a cross domain site. Congratulations, all your user login details are now exposed on the internet.

So, the important thing to understand is, using innerHTML isn’t wrong, it’s perfect if you’re just using it to build templates using only your own trusted developer code. The real question should’ve been «how do I append untrusted user text that has newlines to my HTML document».

This raises a question: which strategy do we use for newlines? do we use [br] elements? [p]s or [div]s?

Here is a short function that solves the problem:

You can basically throw this somewhere in your common_functions.js file and then just fire and forget whenever you need to append any user/api/etc -> untrusted text (i.e. not-written-by-your-own-developer-team) to your html pages.

the parameter newlineStrategy accepts only valid dom element tags, so if you want [br] newlines, pass ‘br’, if you want each line in a [p] element, pass ‘p’, etc.

Строки – тип данных в JS

Продолжаем знакомиться с типами данных в JS и на очереди у нас строки. Строки – это не что иное, как набор символов Юникод и используются в JS для предоставления текста.

Кавычки

Строки заключаются в двойные или одинарные кавычки, допускается оставлять строки пустыми.

let double_quote = «текст в JS»;
let single_quote = 'текст в JS';
let x = «»; // значение переменной x пустое

Внутри строки с двойными/одинарными кавычками не могут располагаться слова с двойными/одинарными кавычками.

let a = «кавычки «в» строке»; // неправильно

А вот такая конструкция допускается.

let b = «кавычки 'в' строке»; // правильно
let b = 'кавычки «в» строке'; // правильно

Как быть, если все-таки надо вставить в строку с двойными кавычками, слово, обрамленное в двойные кавычки? Перед открывающей внутренней кавычкой, нужно поставить символ обратный слэш \ — сделать экранирование. Это правило касается и одинарных кавычек.

Как начать с новой строки?

Существует символ переноса строки \n.

• банан
• яблоко
• груша

Длина строки

В программировании понятие текста – никакая не лирика, здесь все символы на учете в буквальном смысле. Видите ли, строка имеет конкретную длину (количество символов), за что отвечает свойство length. Как принято в языках программирования, исчисление символов Юникода начинается с нуля. Для пустой строки, длина строки length равна 0. Пробел в строке – это тоже символ.

alert( 'пробел засчитан'.length ); // length равен 15

Как работать со строками в JS?

Давайте посмотрим, что можно делать со строками? Строку можно:

• объединять
• разбивать
• удалять
• сравнивать
• заменять
• преобразовывать строку в число
• делать поиск в строке

Для работы со строками JavaScript есть специальные методы.

Конкатенация — объединение строк

Оператор сложения + объединяет несколько строк в одну целую строку. Пустые кавычки обозначают пробел, сам по себе пробел не появится, его нужно прописать.

let c = «метод» + » » + «конкатенации»; // одна строка «метод конкатенации»

Split() — разбить строку

Метод split разбивает строки на подстроки по определенным символам и возвращает их в виде массива. В переменной s находится строка с разными типами данными, написанными через запятую. Мы разбиваем строку по запятой, в дальнейшем результат запишется в массив.

let s = 'разбить строку, 1,2,5'
let arr = new Array();
arr = s.split(',');

Все элементы вернулись в виде массива.

Удалить из строки – substr()

Метод substr() возвращает указанное количество символов в первом параметре, на число удаляемых символов length во втором параметре.

str.substr(1, 2)); // останется два символа 'да'
str.substr(1)); // останется 'далить'

Преобразовать строку в число

В JS предусмотрено автоматическое преобразование типов данных. Если браузер видит, что мы пытаемся выполнить математическое действие между строкой и числом, то он автоматически преобразует строку в число.

console.log (5 +' 5') // возвращает результат 10

Метод parseInt анализирует первый передаваемый параметр и возвращает число.

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

Вы можете заменить первый передаваемый параметр на второй, используя метод replace().

let result = str.replace(«JavaScript», «JS»);

Нижний и верхний регистр

Метод toLowerCase() преобразует символы строки в нижний регистр. Метод toUpperCase() преобразует символы строки в верхний регистр.

Задача на поиск символов в подстроке

Надо написать функцию, которая возвращает true, если строка содержит символы 'купить', в противном случае false.

Решение задачи

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

function check(str) <
let lowerStr = str.toLowerCase();
return lowerStr.includes('купить');
>
alert( check('купить машину') ); // вернет true
alert( check(«хорошая погода») ); // вернет false

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

JavaScript: Экранирующие последовательности

Мы хотим показать диалог Матери Драконов со своим ребёнком:

Если вывести на экран строку с таким текстом:

то получится так:

Не то, что мы хотели. Строки расположены друг за другом, а не одна ниже другой. Нам нужно как-то сказать интерпретатору «нажать на энтер» — сделать перевод строки после вопросительного знака. Это можно сделать, используя символ перевода строки: \n .

\n — это специальный символ. В литературе его часто обозначают как LF (Line Feed). Возможно вы сейчас подумали, что это опечатка, ведь здесь мы видим два символа \ и n , но это не так. С точки зрения компьютера — это один невидимый символ перевода строки. Доказательство:

Почему так сделано? \n — всего лишь способ записать символ перевода строки, но сам перевод строки по своему смыслу – это один символ, правда, невидимый. Именно поэтому и возникла такая задача. Нужно было как-то представить его на клавиатуре. А поскольку количество знаков на клавиатуре ограничено и отдано под самые важные, то все специальные символы реализуются в виде таких обозначений.

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

Устройство, которое выводит соответствующий текст, учитывает этот символ. Например, принтер при встрече с LF протаскивает бумагу вверх на одну строку, а текстовый редактор переносит весь последующий текст ниже, также на одну строку.

\n — это пример экранирующей последовательности (escape sequence). Их ещё называют управляющими конструкциями. Хотя таких символов не один десяток, в программировании часто встречаются всего несколько. Кроме перевода строки, к таким символам относятся табуляция (разрыв, получаемый при нажатии на кнопку Tab) и возврат каретки (только в Windows). Нам, программистам, часто нужно использовать перевод строки \n для правильного форматирования текста.

На экран выведется:

Обратите внимание на следующие моменты:

Не имеет значения, что стоит перед или после \n : символ или пустая строка. Перевод будет обнаружен и выполнен в любом случае.

Помните, что строка может содержать один символ или вообще ноль символов. А еще строка может содержать только \n . Проанализируйте следующий пример:

Здесь мы сначала выводим строку «перевод строки», а потом делаем вывод обыкновенной строки. Программа выведет на экран:

Почему перед строкой Dunsen появилось две пустые строки, а не одна? Дело в том, что console.log() при выводе значения автоматически добавляет в конец символ перевода строки. Таким образом, один перевод строки мы указали явно, передав этот символ экранирующей последовательности аргументом в функцию, а второй перевод строки добавлен самой функцией автоматически.

Ещё пример кода:

Вывод будет таким:

Сейчас у вас достаточно знаний, чтобы самостоятельно разобраться и понять, почему вывод сформировался именно таким образом.

Если нам понадобится вывести \n именно как текст (два отдельных печатных символа), то можно воспользоваться уже известным нам способом экранирования, добавив еще один \ в начале. То есть последовательность \\n отобразится как символы \ и n , идущие друг за другом.

на экран выйдет:

Небольшое, но важное замечание про Windows. В Windows для перевода строк по умолчанию используется \r\n . Такая комбинация хорошо работает только в Windows, но создаёт проблемы при переносе в другие системы (например, когда в команде разработчиков есть пользователи как Windows, так и Linux). Дело в том, что последовательность \r\n имеет разную трактовку в зависимости от выбранной кодировки (рассматривается позже). По этой причине, в среде разработчиков принято всегда использовать \n без \r , так как LF всегда трактуется одинаково и отлично работает в любой системе. Не забудьте настроить ваш редактор на использование \n .

Задание

Напишите программу, которая выводит на экран:

При этом программа использует только один console.log() , но результат на экране должен выглядеть в точности, как показано выше.

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Полезное

Обязательно поэкспериментируйте с выводом разных строк на сайте https://replit.com/languages/nodejs

Определения

Экранирующая последовательность — специальная комбинация символов в тексте. Например, \n — это перевод строки.