Как из одного текста делать разное количество тегов как в stackoverflow

Question

Мне нужно чтобы из textarea забирался текст и показывался в разных тегах

В Stackowerflow если начать печатать предварительно нажав ENTER и переместив курсор вниз то оно будет показываться в разных тегах html

Answer 1

Привожу простой пример решения. Но оно не оптимально, т.к. любое изменение исходного текста в внутри textarea приводит к пересчету всех элементов контейнера output-container.

const inputArea = document.querySelector('.input-area');
const outputContainer = document.querySelector('.output-container');

inputArea.oninput = () => {
    const strings = inputArea.value.split('\n');
    const paragraphs = strings.map(str => {
        const p = document.createElement('p');
        p.textContent = str;
        return p;
    });
    
    outputContainer.replaceChildren(...paragraphs);
};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <textarea class="input-area"></textarea>
    <div class="output-container"></div>
    <script src="script.js"></script>
</body>
</html>

Answer 2

На ReactJS разбить текст из textarea по символу переноса строки и отобразить построчно в отдельном теге можно так:

const App = () => {
  const [text, setText] = useState('');
  
  return (
    <>
      <textarea onInput={(e) => setText(e.target.value)}>{text}</textarea>
      <div>{text.split('\n').map(el => <p>{el}</p>)}</div>
    </>
  )
}

Для красоты и эстетики кода, события ввода данных и превращению текста в массив для рендера, можно вынести в отдельные функции - тут, как говорится, по вкусу.

Песочница с примером

БЛОГ НА HUSL

Как из одного текста делать разное количество тегов как в stackoverflow

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