Чтение значений из текстового поля по отдельности

Я хотел бы прочитать все значения из текстового поля/текстового поля по отдельности, а затем записать их в таблицу:

Пример:

This is an example of a text I want to read out.

Выход:

  1. Этот
  2. является
  3. ан
  4. пример
  5. из
  6. а
  7. текст
  8. я
  9. хотеть
  10. к
  11. читать
  12. вне

Как я могу использовать цикл для чтения текстового поля/текстового поля? То есть всякий раз, когда появляется пробел, новое последующее значение должно быть в новой строке.

String.prototype.split()
Reyno 14.12.2020 10:59
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
7
2
79
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Нить:

var table = document.getElementById("table");
var phrase = "This is an example of a text I want to read out";

var words = phrase.split(" ");
for (var i = 0; i < words.length; i++) {
  var tableCol = 
  `<tr>
    <td>${i+1}:</td>
    <td>${words[i].replace(/[\.,!\?]/g," ")}<td>
  </tr>`;
  
  document.querySelector('table tbody').innerHTML += tableCol;
}
#table {
  border: 1px solid;
}

th {
  border: 1px solid;
  padding: 5px;
}
<table id = "table">
  <thead>
    <th>Number:</th>
    <th>Word:</th>
  <thead>
  <tbody>

  </tbody>
</table>

Вход:

var table = document.getElementById("table");
var myBtn = document.getElementById("myBtn");
var myInput = document.getElementById("myInput");

myBtn.addEventListener('click', () => {
  document.querySelector('tbody').innerHTML = '';
  var phrase = myInput.value;
  var words = phrase.split(" ");
  for (var i = 0; i < words.length; i++) {
    var tableCol = 
    `<tr>
      <td>${i+1}:</td>
      <td>${words[i].replace(/[\.,!\?]/g," ")}<td>
    </tr>`;

    document.querySelector('tbody').innerHTML += tableCol;
  }
});
input {
  margin-bottom: 10px;
  width: 300px;
  height: 25px;
}

#table {
  border: 1px solid;
}

th {
  border: 1px solid;
  padding: 5px;
}
<input id = "myInput" type = "text">
<button id = "myBtn">Create Table</button>

<table id = "table">
  <thead>
    <th>Number:</th>
    <th>Word:</th>
  <thead>
  <tbody>

  </tbody>
</table>

Вы пропустили знаки препинания

mplungjan 14.12.2020 12:11

Короче и убрать знаки препинания

const str = `This is an example of a text I want to read out.`;

document.querySelector('table tbody').innerHTML = str.split(" ")
  .map((word,i) => `<tr><td>${i+1}:</td><td>${word.replace(/[\.,!\?]/g,"")}<td></tr>`)
  .join("");
<table id = "table">
  <thead>
    <th>Number:</th>
    <th>Word:</th>
  <thead>
  <tbody>

  </tbody>
</table>

Другие вопросы по теме