Как вывести текст в textarea не потеряв переносы строк в тексте?

Question

[Алексей]

Нужно вывести текст в textarea из SQL, не потеряв при этом переносы в тексте.
Что делал:

ВАРИАНТ 1-Й

1 - пишу абзац текста с переносами в textarea

Мама мыла
раму чисто
и быстро!

2 - Отправляю в SQL-базу

3 - Читаю из SQL-базы обратно в textarea

И имею ошибку в консоли:

Uncaught SyntaxError: '' string literal contains an unescaped line break

Скриншот фрагмента кода удален модератором.

Зато абзац текста выводится в textarea как надо, с переносами

Мама мыла
раму чисто
и быстро!

Вариант с красной ошибкой в консоли конечно НЕ вариант

ВАРИАНТ 2-Й

1 - Заново набираю абзац текста в textarea с переносами

Мама мыла
раму чисто
и быстро!

2 - Меняю спец-символы переноса \n \r на HTML-сущности

вот так:

$var_zametka = addslashes($var_zametka);

2 - Отправляю в SQL-базу

3 - Читаю из SQL-базы обратно в textarea

НЕТ ошибки в консоли:
Но, абзац текста выводится в textarea с недостатками:

- переносы исчезли
- текст выводится с html-сущностями
- и еще слитной колбасой..

Мама мыла\r\nраму чисто\r\nи быстро!

Переносы утрачены

>можно тут почистить эти сущности \n\r, но будут только пробелы вместо переносов..

Разные очистки пробовал:

$var_zametka = str_replace ('\r\n', '\n', $var_zametka);

$var_zametka = nl2br(htmlspecialchars($var_zametka));

$var_zametka = html_entity_decode($var_zametka);

$var_zametka = html_entity_decode($var_zametka, ENT_QUOTES | ENT_HTML5, 'UTF-8');

ВАРИАНТ 3-Й

1 - пишу абзац текста с переносами в textarea

Мама мыла
раму чисто
и быстро!

2 - Отправляю в SQL-базу НЕ МЕНЯЯ на HTML-сущности

3 - Оригинальные системные переносы сохраняются в SQL - базе

4 - лезу руками в SQL-базу, меняю

«Переносы как в Windows»



на
«Переносы как в Unix»



5 - Читаю из SQL-базы обратно в textarea

НЕТ ошибки в консоли:

Абзац текста выводится в textarea так:

Мама мыла‧раму чисто‧и быстро!

- вместо переносов — точки!
- и опять слитной колбасой..
- ну и руками в SQL лазить как бы вообще не надо это чтоб понять механику..

Comments

[Дмитрий]

А что вы в js делаете что у вас ошибка в консоли?

[Алексей]

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

И причем, когда я убиваю запись с текстом содержащие такие переносы - ошибка тут же исчезает..

[Дмитрий]

Алексей, html плевать хотел на любые переносы - и не будет сообщать об синтаксической ошибке. Js не все равно - и ровно он будет ругаться. Вопрос что у вас там делает js и зачем?

[AUser0]

Выясняйте не пропадание переносов, а причину ошибки JS на пустой строке ''.

А так, проверьте HTML-код

<textarea>пе-
ре-
нос</textarea>

- на лицо будет отсутствие проблем со съеденными переносами.

[Алексей]

Дмитрий, Я передаю данные действительно JS функцией (а точнее jQuery )по имени компонента textarea:

name="input_zametka"

JS

<script>
	$("a[href='#id_form_edit_note']").click(function() {

		var dataForm_input_zagolovok = $(this).data("input_zagolovok");
		var dataForm_input_zametka = $(this).data("input_zametka");

		$(".window_OPTIONS_theme [name=input_zagolovok]").val(dataForm_input_zagolovok);
		$(".window_OPTIONS_theme [name=input_zametka]").val(dataForm_input_zametka);

	});
</script>

HTML

<form action="add_or_edit.php" id="id_form_edit_note" name="name_form_edit_options_note_js" method="post" class="window_OPTIONS_theme" enctype="multipart/form-data">

	<div class="RIGHT_PAGE_LIST">

		<table class="message_box">

			<tr>
				<td>
					<input name="input_zagolovok" id="id_zagolovok" disabled class="DE_VISIBLE_class_input_zagolovok_main" type="text">
				</td>

				<td>
					<textarea rows="20" cols="10" class="DE_VISIBLE_textarea_zametka_main" disabled id="id_textarea_zametka" name="input_zametka"></textarea>
				</td>

			</tr>

		</table>

	</div>

</form>

Данные поступают без проблем. Тут задача правильно читать из базы спец-символы переносов ( /n/r )

[Дмитрий]

Алексей,
$textaerea= json_encode($text);

Answer 1

[Ипатьев]

ВАРИАНТ 4-Й, очевидный
1 - пишу абзац текста с переносами в textarea
2 - Отправляю в SQL-базу ничего не меняя.
3 - Оригинальные системные переносы сохраняются в SQL - базе, как и должны, поскольку любые заморочки с яваскриптами к базе данных не имеют вообще никакого, ни малейшего отношения
4 - Читаю из SQL базы
5 - Вывожу в обратно в texarea
6 - В texarea ВСЁ РАБОТАЕТ! A magic! При том что мы вообще нигде ничего ни на что не меняли

6a - По поводу HTML сущностей. Хотя в приведённом примере нет ни одного символа, который бы требовал перекодирования в HTML-сущности, тем не менее, при выводе любого текста в HTML, эти сущности действительно должны быть перекодированы в обязательном порядке, всегда, в 100% случаев. Причем с помощью не какой-то левой addslashes, а функции, которая действительно это делает, htmlspecialchars($var_zametka)

7 - Собираюсь с мыслями, и напряжённо думаю - в каком месте у меня текст взаимодействует с яваскриптом? Который к выводу текста в текстарию не имеет ни малейшего отношения?
8 - думаю...
9 - думаю...
10 - наконец-то нахожу.
11 - перед тем, как отправлять текст в яваскрипт, кодируем его тем методом, который специально предназначен для отправки данных в яваскрипт, а не какими-то шаманскими заклинаниями и плясками с бубном.echo json_encode($var_zametka)
12 - ВСЁ РАБОТАЕТ! Просто потому, что получилось расхлебать кашу в голове, в которой SQL путается с РНР, HTML c яваскриптом, а экранирование спецсимволов почему-то называется заменой на HTML-сущности. Хотя если открыть документацию на абсолютно бесполезную функцию addslashes, то там ни одного разочка слово HTML не встретится.

Comments

[Алексей]

Спасибо за подробный ответ.
Пока не могу сложить всё воедино..

У меня эта команда ошибку выдаёт.. вернее ломается полностью страница,
И она ДАЖЕ не отображается как функция PHP...

echo json_dencode($var_zametka)

Отлаживаю на OpenServer. В настройках выставлен PHP_7.1

А команда я так понял доступна только с PHP 8.0.24

Это ж наверное обновлять OpenServer нужно.. Ох после обновления чую ряд функционала может отвалиться..

В любом случае спасибо за идею..

[Ипатьев]

Это я опечатался, json_encode
но в текстарию это выводить бесполезно

[Алексей]

Ипатьев,

Пишу абзац:



комнда json_encode($var_zametka); — работает, но странно (видмо не предназначена для обработки текста со спец-символами.. меня интересуют переносы /n/r )

$var_zametka = $buffer_data_NOTE['zametka'];
$var_zametka = json_encode($var_zametka);

Да, это странно обработалось..

\u041d\u043e\u0432\u044b\u0439 \u042d\u043b\u0435\u043a\u0442\u0440\u043e\r\n\u0441\u0430\u043c\u043e\u043a\u0430\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439\r\n\u0443\u043c\u0435\u0435\u0442 \u0435\u0437\u0434\u0438\u0442\u044c \u043f\u043e \u0437\u0435\u043c\u043b\u0435!

Я опять запутался))

[Ипатьев]

почему вас интересуют переносы \n\r?
в текстарию они должны выводиться как есть

[Алексей]

Ипатьев,

не получается выводить как есть

Это мой описанный ВАРИАНТ-1

Если выводить как есть, то появляется ошибка:

Uncaught SyntaxError: '' string literal contains an unescaped line break

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



, то ошибка..



а если залезть руками в базу и убить все переносы..



То ошибок нет..



Из этого логично сделать вывод, что нужно:

1 - как то при чтении эти невидимые переносы обработать, что бы ошибки не было.. Возможно экранировать,

2 - А ЗАТЕМ, обратно преобразовать в невидимые системные переносы

Что бы в конечном итоге в textarea текст выводился с переносами:

Новый Электро
самокат, который
умеет ездить по земле!

[Ипатьев]

Вы со своими с дурацкими скриншотами напоминаете наперсточника на вокзале. Полезной информации - ноль, а вместо неё какие-то не относящиеся к делу бессмысленные картинки, которые не дают вообще никакой информации.
Вы можете вместо дурацкого скриншота пустой консоли скопировать сюда ТЕКСТОМ полученный в браузере исходник HTML?

[Алексей]

Ипатьев, Попробую
Страница динамическая, меняется в зависимости от того, что нажато..
и там почти 3000 строк кода..

Вот фрагмент HTML, это один из айтемов (списка записей) нажимая на кнопку-ссылку "button_edit_item_note" — мы собственно читаем нашу запись в , которая находится внутри формы

<!-- ----------------- ITEM NOTE ----------------	 -->
												<div class="item_note_frame">


													<table class="item_note_zagolovok">
														<tr>
															
															<!-- ЗАГОЛОВОК НА КНОПКЕ-АЙТЕМЕ -->
															<td class="td_for_for_zagolovok_item">
																<div class="left_columm_for_zagolovok">
																	<div class="zagolovok_text">

																		<p>Самокат Электрический</p>

																	</div>
																</div>
															</td>


															<!-- КНОПКА РЕДАКТИРОВАНИЯ-ЧТЕНИЯ ЗАПИСИ -->
															<td class="td_for_button_edit">

																<div class="right_columm_for_button">

																	<a href="#id_form_edit_note" class="button_edit_item_note" 
																	data-edit_id="231"

																	data-input_zagolovok="Самокат Электрический"

																	data-input_zametka="Новый Электро
самокат, который
умеет ездить по земле!"
																	data-id_category_note_SET="1"
																	data-url_attach_foto=""><img src="img/img_system_note/pen_white.svg" alt="" onclick="Function_OnChange_Attributes_EDIT_Item()"></a>

																</div>
															</td>


															<!-- КНОПКА УДАЛЕНИЯ ЗАПИСИ -->
															<td class="td_for_button_del">

																<div class="right_columm_for_button">
																	<a href="#callback_delete_note" class="button_del_item_note"
																	data-delete_id="231"
																	data-delete_zagolovok="Самокат Электрический"
																	data-delete_zametka="Новый Электро
самокат, который
умеет ездить по земле!"
																	><img src="img/img_system_note/close.svg" alt=""></a>
																</div>
															</td>

														</tr>

													</table>

												</div>
												<!-- ----------------- ITEM NOTE ----------------	 -->

Текст вывожу сюда, в , в форму

<form action="add_or_edit.php" id="id_form_edit_note" name="name_form_edit_options_note_js" method="post" class="window_OPTIONS_theme" enctype="multipart/form-data">

	<div class="RIGHT_PAGE_LIST">

		<table class="message_box">

			<tr>
				<td>
					<input name="input_zagolovok" id="id_zagolovok" disabled class="DE_VISIBLE_class_input_zagolovok_main" type="text">
				</td>

				<td>
					<textarea rows="20" cols="10" class="DE_VISIBLE_textarea_zametka_main" disabled id="id_textarea_zametka" name="input_zametka"></textarea>
				</td>

			</tr>

		</table>

	</div>

</form>

Что интересно, между тегами контента нет..
Хотя на html странице он выводится, видимо потому что вывожу скриптом, по имени name="input_zametka"

Вот этим:

<script>
	$("a[href='#id_form_edit_note']").click(function() {

		var dataForm_input_zagolovok = $(this).data("input_zagolovok");
		var dataForm_input_zametka = $(this).data("input_zametka");

		$(".window_OPTIONS_theme [name=input_zagolovok]").val(dataForm_input_zagolovok);
		$(".window_OPTIONS_theme [name=input_zametka]").val(dataForm_input_zametka);

	});
</script>

[Ипатьев]

НУ И ГДЕ ЗДЕСЬ САМОКАТ, который выводится в textarea?

[Ипатьев]

Зачем вы нам сутки голову морочили, рассказывая, что выводите в textarea?

[Алексей]

Ипатьев, ВЫВОДИТСЯ!
Я об этом и пишу, что в html страницу текст заметки не печатается! Думаю потому что скрипт его туда ставит!

НО, он выводится в “textarea”! Я так понимаю на лету.. Я его спокойно редактирую и отправляю обратно в базу.

В html его не видно, но в компоненте текст выводится, но опять же, не решена ошибка с переносами..

Так понятно?

[Ипатьев]

ну вот вы выведите его в textarea.
и проблемы все снимутся.

[Алексей]

Ипатьев, Вернулись к тому с чего начали..
Пока не получается читать системные переносы в textarea что бы они реально переносили без ошибок..

Если эти переносы грохнуть, то ошибок нет, но и переносов нет.. а они нужны..

и да, сам текст в textarea html не выводится, но редактируется в textarea..

[Ипатьев]

Единственная причина ваших проблем - это чудовищная каша в голове.
Вы до сих пор воображаете, что проблема в том, чтобы "считать" переносы из textarea
мне кажется вы даже причинно-следственные связи в своем коде не видите.
И проблемы вы пытаетсь решать в SQL, а не там, где они на самом деле есть.

Поэтому, для простоты - просто выводите свои тексты для редактирования в textarea. НАПРЯМУЮ, а не семь верст на телеге яваскриптом. Если не умеете с ним работать.
Сэкономите кучу времени и себе и окружающим

[Ипатьев]

У меня не получается воспроизвести вашу проблему.

spoiler

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
                                <div class="right_columm_for_button">
                                  <a href="#callback_delete_note" class="button_del_item_note" 
                                  onclick="document.getElementById('id_textarea_zametka').value=this.dataset.delete_zametka"
                                  data-delete_id="231"
                                  data-delete_zagolovok="Самокат Электрический"
                                  data-delete_zametka="Новый Электро
самокат, который
умеет ездить по земле!"
                                  >click</a>
                                </div>
<form action="add_or_edit.php" id="id_form_edit_note" name="name_form_edit_options_note_js" method="post" class="window_OPTIONS_theme" enctype="multipart/form-data">
          <input name="input_zagolovok" id="id_zagolovok" disabled class="DE_VISIBLE_class_input_zagolovok_main" type="text">
          <textarea rows="20" cols="10" class="DE_VISIBLE_textarea_zametka_main" disabled id="id_textarea_zametka" name="input_zametka"></textarea>
</form>
  </body>
</html>

Все работает без всяких ошибок
судя по всему проблема в jquery.
Если избавиться от этой убогой никому не нужной поделки, то проблема решена

[Алексей]

Ипатьев, Нашёл ошибку!

[Алексей]

Рассказываю)

Ошибка не была связана с textarea! Но кто ж знал.. Тут извинаяюсь, не правильно обозначил проблему, но всё вело именно к textarea, вот сложно было понять в чём дело..

Да, сам textarea - не имеет отношения к проблеме..
Спасибо за идею Ипатьев, не знаю как по имени!

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

Теперь, шо же в итоге ипало мозги.?!

Оказалось это Ajax.., а точнее КОВЫЧКИ — и до смешного легко решается проблема..

Вот скрин ошибки: (знаю, ты не любишь мои скрины )) но тут наглядно виден косяк)



Теперь как лечить такую проблему?:

Ответ по сути уже был сообщении ошибки, но я не догадался:

Uncaught SyntaxError: '' string literal contains an unescaped line break

перевод: строковый литерал содержит неэкранированный разрыв строки

Погуглив проблему нашел 3 варианта лечения:

console.log(`<%= recaptcha_element('signup')%>`);

console.log("<%= recaptcha_element('signup')%>");

console.log('<%= recaptcha_element(\'signup\')%>');

Код с ошибкой:

/*ПО СУТИ ПО-ШАГОВАЯ ЗАДЕРЖКА - ЭТА ЧАСТЬ ИСПОЛНЯЕТСЯ, ПОСЛЕ ТОГО, КАК ЗАПРОС SQL - УЖЕ БЫЛ ОТПРАВЛЕН*/
			  .done(function( msg ) {

				$('input.class_input_zagolovok_main').val('<?= $var_zagolovok ?>')

				$('textarea.class_textarea_main').val('<?= $var_zametka ?>');

			  });

ЛЕЧУ! Код без ошибки:

/*ПО СУТИ ПО-ШАГОВАЯ ЗАДЕРЖКА - ЭТА ЧАСТЬ ИСПОЛНЯЕТСЯ, ПОСЛЕ ТОГО, КАК ЗАПРОС SQL - УЖЕ БЫЛ ОТПРАВЛЕН*/
			  .done(function( msg ) {

				$('input.class_input_zagolovok_main').val('<?= $var_zagolovok ?>')

				$('textarea.class_textarea_main').val(`<?= $var_zametka ?>`);

			  });

Усё работает!
Читает, Сохраняет, Редактирует, Удаляет — с переносами..

Answer 2

[Владимир Кохан]

Нагородили, просто ппц :)
А применить к textarea правило CSS не пробовали?
white-space: pre-line;