Javascript - Обернуть содержимое текстовой области тегами html

Question

Я использую следующую форму для сохранения текстовых файлов на сервере:

<form action="***.php" method="post">
   <textarea class="chrr" name="text" placeholder="Text" required></textarea>
   <button type="submit">SAVE</button>
</form>

Используя следующий код javascript, я исправляю ввод textarea:

const form = document.forms[0];
const string = document.getElementsByClassName("chrr");

form.oninput = () => {
   string[0].value = correct(string[0].value);
};

function correct(string) {
   string = string.replace(/  +/g, ' ');
   string = string.replace(/—|–/g, '-');
   string = string.replace(/‘|’/g, "'");
   string = string.replace(/“|”/g, '"');
   string = string.replace(/…/g, '...');
   return string;
};

Сейчас Я хотел бы обернуть каждую строку текста тегами "p". Итак, если я вставлю текстовую область:

First line...
Second line...
Third line...

Текст должен автоматически стать:

<p>First line...</p>
<p>Second line...</p>
<p>Third line...</p>

Как мне достичь этого результата с чистым javascript (нет JQuery) ?

Спасибо.

Answer 1

Вы можете разделить строку с помощью \n, а затем сопоставить строку, чтобы обернуть ее элементом ( p ). Наконец присоединяйтесь к ним:

var str = `First line...
Second line...
Third line...`;

str = str.split('\n').map(s => `<p>${s}</p>`).join('\n');
console.log(str);