При потере фокуса запишите каждое предложение из текста в тег li

Question

Дан пустой список ul и textarea. В него вводится текст со знаками препинания. По потери фокуса запишите каждое предложение из текста в свой тег li.

<!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>
    <ul id="ul"></ul>
    <textarea id="text">
    </textarea>
    <script>
      let texts = document.getElementById("text");
      document.querySelector("textarea").addEventListener("blur", () => {
        texts = texts.value.split(".");
        for (let text of texts) {
          const newListItem = document.createElement("li");
          newListItem.textContent = text
       document.querySelector('ul').appendChild(newListItem);
        }
      });
    </script>
  </body>
</html>

Задание я сделал, но если в конце последнего предложения есть точка, то добавляется пустой li. Проверил создаваемый массив: в нем создается перенос строки. Плюс если в textarea заново вводить предложения, то они не перезапишут уже введенные, а в консоли появится ошибка)

Answer 1

чтобы исправить ошибку в консоли, я добалю проверку на пустой текст if (texts), которая удостоверяется, что textarea не пустой

в моем примере регулярное выражение (/(?<=[.!?])\s+/) , которое разделяет текст по точкам, а также учитывает знаки ?, ! и пробелы \s+.

if (sentence) если строка пустая, то мы не добавим ее в список

document.querySelector("textarea").addEventListener("blur", () => {
  // Получаем текущее значение textarea
  let texts = document.getElementById("text").value;

  // Проверяем, если текст не пустой
  if (texts) {
    // Разделяем текст на предложения, используя регулярное выражение
    let sentences = texts.split(/(?<=[.!?])\s+/);

    // Очищаем текущий список перед добавлением новых элементов
    const ulElement = document.getElementById("ul");
    ulElement.innerHTML = "";

    // Добавляем каждое предложение в отдельный li
    for (let sentence of sentences) {
      // Убираем возможные пробелы в начале и конце предложения
      sentence = sentence.trim();
      if (sentence) {
        const newListItem = document.createElement("li");
        newListItem.textContent = sentence;
        ulElement.appendChild(newListItem);
      }
    }
  }
});

<!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>
  <ul id="ul"></ul>
  <textarea id="text"></textarea>

</body>

</html>

предложу вариант и без регулярного выражения slice(),мы вручную управляем разделением текста.

минусы, что надо обработать все случаи, к примеру троеточие...больше кода

document.querySelector("textarea").addEventListener("blur", () => {
  // Получаем текущее значение textarea
  let texts = document.getElementById("text").value;

  // Проверяем, если текст не пустой
  if (texts) {
    // Очищаем текущий список перед добавлением новых элементов
    const ulElement = document.getElementById("ul");
    ulElement.innerHTML = "";

    let start = 0;

    for (let i = 0; i < texts.length; i++) {
      // Проверяем на конец предложения (по точке, вопросительному или восклицательному знаку)
      if (texts[i] === '.' || texts[i] === '!' || texts[i] === '?') {
        // Получаем предложение, обрезая пробелы
        let sentence = texts.slice(start, i + 1).trim();
        start = i + 1;

        // Если предложение не пустое, добавляем его в список
        if (sentence) {
          const newListItem = document.createElement("li");
          newListItem.textContent = sentence;
          ulElement.appendChild(newListItem);
        }
      }
    }

    // Если есть остаток текста, который не заканчивается на знак препинания
    let lastSentence = texts.slice(start).trim();
    if (lastSentence) {
      const newListItem = document.createElement("li");
      newListItem.textContent = lastSentence;
      ulElement.appendChild(newListItem);
    }
  }
});

<!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>
  <ul id="ul"></ul>
  <textarea id="text"></textarea>

</body>

</html>

БЛОГ НА HUSL

При потере фокуса запишите каждое предложение из текста в тег li

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