Как реализовать: textarea — обработка — максимум 1 пробел и 2 тега br?

Question

[sdgs4s4 .]

1 часть:

Есть обычный textarea <textarea name="description"></textarea>, вставляя в который текст без обработки все будет в одну строчку

Нашел на пространстве гугла скрипт:

(нажать на меня)

function replace() {
    var form = document.getElementById('form-textarea');
    var form_text = form.value;
    var pattern = /\r\n|\r|\n/g;
    var new_pattern = form_text.replace(pattern,"<br>");
    alert(new_pattern);

Но он делает ровным счетом то, что ему написали, неограниченное число пробелов и < br >

Как будет выглядеть скрипт, который имеет следующие функции:
- текст оборачиваем в <p> </p>
- максимум 1 пробел
- максимум 2 <br>
- если указано 2 <br> - закрывается </p> и открывается новый <p>

Тут пример отображения уже после вывода из БД (нажать на меня)

<p>Тут пишем текст, 
      <br>
      который можно перенести тегом br</p>
<br>
<br>
<p>а если мы указываем 2 тега br, то тег p закрывается и <br>
      открывается новый </p>
<br>
<br>
<p>и так<br>
      неограниченное<br>
      число<br>
      раз
</p>

____________________
2 часть:

вывод текстовой информации из БД в виде текста

другими словами если я сейчас добавлю на сайт в textarea -> БД -> отображение на странице, то, например, добавленыый title page отобразится как заголовок 1-го уровня, а не как текст

_______________

Прошу помочь, если уже где то лежит репозиторий, то прошу скинуть, ибо 2 для поиска привели к нулевому результату, за исключением редакторов WYSIWYG, где самый минимальный функционал позволяет вытворять в него что угодно, от картинок, до php, js, html вставок

Comments

[Stalker_RED]

Вынесите вторую часть в отдельный вопрос, и желательно как-то подробнее описать что вы хотите от вывода.

[sdgs4s4 .]

Stalker_RED: хорошо, сделаю, скажите как их разделить, а то я не совсем понимаю на каком этапе идет обработка и преобразование во все эти теги и условия с </p><br>, пробелами и всем прочим

чтоб правильно вопросы были, а то может эта обработка делается до ввода в БД, а я будузадавать вопрос с после вывода из БД

[Кирилл Жиляев]

Stalker_RED: как я понял нужно чтобы пробелами и переносами не спамили

[sdgs4s4 .]

Кирилл Жиляев: да

Answer 1

[Stalker_RED]

Если я правильно понял что вы хотите, то как-то так:

function convert() {
  to.innerHTML = from.value
    .replace(/\ {2,}/g, ' ') // максимум 1 пробел
    .replace(/(\r\n|\r|\n){2,}/g, "<br><br>") // максимум 2 <br>
    .replace(/(\r\n|\r|\n)/g, "<br>") // одиночные \n в <br>
    .split('<br><br>').map(s=>`<p>${s}</p>`).join("\n\n") // возможно join стоит заменить на join(""), чтоб не добавлять лишние переводы строк.
}

https://jsfiddle.net/vdth6Lj5/2/

Comments

[sdgs4s4 .]

да, а еще нужно hello world foo bar обернуть в тег <p>

вот так:

<p>
   hello 
</p>
<p>
   world 
   foo 
</p>
<p>
   bar
<p>

[Сергей Сергей]

.split ( '<br><br>' )
.map ( s => '<p>' + s + '</p>' )
.join ( '<br><br>' )

[sdgs4s4 .]

Сергей Сергей: магия вне хогвартса запрещена!

а если на деле, то что это такое, как с этим работать и на каком этапе обработки текста?

[Сергей Сергей]

lipatkin: это в дополнение к текущему ответу для оборачивания абзацев.

[sdgs4s4 .]

Сергей Сергей: я получается в бд добавил, но уже не показывает теги, не говоря про вывод на страницу

Фоточки (нажать на меня)

это получается еще обработку на вывод текста нужно делать?

- - -

сделай отдельным овтетом, я вам обоим отмечу решением

[Stalker_RED]

lipatkin: Дополнил, добавил обертку в <p> вместо двойных <br>, как и подсказывал Сергей Сергей

[Сергей Сергей]

lipatkin: если в базе можно теги хранить, то конвертировать перед записью, иначе после. Но я не понял, где результаты обработки?

[sdgs4s4 .]

Сергей Сергей: а я оказывается еще и подключить это не могу, как скриптом вставил, а он игнорирует textarea xD

сейчас с этим посижу, подумаю

[Stalker_RED]

lipatkin: Что значит "как скриптом вставил"?

[sdgs4s4 .]

Stalker_RED:

<script>
from.addEventListener('keyup', convert)
convert()

function convert() {
  code.value = to.innerHTML = from.value
    .replace(/\ {2,}/g, ' ') // максимум 1 пробел
    .replace(/(\r\n|\r|\n){2,}/g, "<br><br>") // максимум 2 <br>
    .replace(/(\r\n|\r|\n)/g, "<br>") // одиночные \n в <br>
    .split('<br><br>').map(s=>`<p>${s}</p>`).join ("\n\n")
}
</script>

<form action="#" method="post" enctype="multipart/form-data">
      <textarea name="description" id="from" cols="50" rows="12"></textarea>
      <input type="submit" name="submit" class="btn btn-default" value="Сохранить">
</form>

сейчас сижу, колдую, перебираю старые скрипты в попытке подключить этот))

- - -

как бы могу кастыль сделать на второй textarea, как у вас в примере, на него name="description" и через style="display:none;", но блин... xD

[Stalker_RED]

lipatkin: в первой строчке функции convert
from - элемент откуда берется строка. to - элемент куда записывается результат.
code можно вообще выбросить, это в примере нижняя textarea, чтоб показать разметку итоговую.

[sdgs4s4 .]

Stalker_RED: это чуть понял, но пока сумел осуществить только костылем, спасибо за помощь

[sdgs4s4 .]

Stalker_RED: а это в БД в таком виде нормально будет заносить? ну в смысле что вставки <p> и <br>

я потому что думаю из БД выводить исключительно как текст. Просто на данный момент если написать в textarea тег h1, то при выводе на index.php он отобразится как заголовок 1 уровня, собственно как и любой другой код

[Stalker_RED]

lipatkin: Сохранять нормально. Потом при выводе можно (и нужно) экранировать.
Конечно, если вам хочется, можете и удалить все теги перед форматированием (strip_tags).
Вот взять к примеру тостер- как бы мы писали тут комментарии с кодом и ссылками, если бы он все теги удалял?