Добавление символов jquery

введите сюда описание изображенияЕсть код, необходимо в text area вводить текст, он переносится в div и если в text area перейти на новую строку в div в конец КАЖДОЙ строки добавляется символ к примеру "P"

тоесть если у нас будет 15 строк в text area в div должны отображаться все эти 15 строк с символом "Р" в конце

UPD на скриншоте моя очередная попытка, не работает

document.addEventListener('input', function (e) {
  document.querySelector("div").textContent = document.querySelector("textarea").value;
})
textarea, div {
  font-family: monospace;
  font-size: 1rem;
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid;
  padding: .5em;
}

textarea {
  margin-bottom: 1em;
  height: 7em;
}

div {
  white-space: pre-line;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
<textarea autofocus></textarea>
<div></div>


Ответы (1 шт):

Автор решения: Dmitry Kozlov

Как вариант, разделить строку на массив по признаку конца строки. К каждому элементу добавить "P". Объединить массив в строку и вывести

document.addEventListener('input', function (e) {
  const text = document.querySelector("textarea").value || '';
  const lines = text.split(/\r?\n/);
  let resultText = '';
  lines.forEach((line) => {
    resultText += line + 'P' + '\n';
  });
  document.querySelector("div").textContent = resultText;
})
textarea, div {
  font-family: monospace;
  font-size: 1rem;
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid;
  padding: .5em;
}

textarea {
  margin-bottom: 1em;
  height: 7em;
}

div {
  white-space: pre-line;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
<textarea autofocus></textarea>
<div></div>

→ Ссылка