主页 / 问题 / 1592128
Accepted
alexWithoutBeard
Asked:2024-08-28 16:10:29 +0000 UTC2024-08-28 16:10:29 +0000 UTC

当你失去焦点时，将文本中的每个句子写入 li 标签

  • 772

给定 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>

我完成了任务，但是如果最后一句末尾有句号，则添加一个空李。我检查了正在创建的数组：其中创建了一个换行符。另外，如果您在文本区域中重新输入句子，它们不会覆盖已经输入的句子，并且控制台中会出现错误）

javascript

1 个回答

  1. Best Answer

    为了修复控制台中的错误，我将添加对空文本的检查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>

    • 1

相关问题