Как подсчитать количество слов в текстовом поле с помощью JavaScript?
В этой статье описывается подход к вычислению количества слов в заданном вводе текста. Это может быть полезно в сценариях, когда пользователю рекомендуется ввести определенное количество слов, и счетчик слов может отслеживать то же самое. Ниже рассматриваются два подхода:
Подход 1. Расчет количества пробелов в тексте.
Этот метод полагается на количество пробелов, присутствующих во входной строке, для подсчета количества слов, поскольку каждое слово в предложении разделено пробелом. Функция countWord () определяется который берет текст, присутствующий в текстовом поле, и подсчитывает количество имеющихся в нем пробелов. Входной текст в текстовой области выбирается с помощью метода getElementById ().
Недостатком этого метода является то, что несколько пробелов между словами будут считаться несколькими словами, поэтому подсчет слов может быть ненадежным.
Пример:
Выход:
Подход 2: разделение слов на основе пробелов, а затем подсчет количества слов
В этом подходе мы улучшаем недостаток предыдущего подхода, разбивая слова на основе символа пробела, а затем проверяя, что каждое разделение не является только символом пробела. Функция countWord () вызывается каждый раз, когда пользователь вводит что-то в текстовую область, используя обработчик события oninput в текстовой области.
Пример:
HTML
<!DOCTYPE html> < html > < body style = "text-align: center;" > < h1 style = "color: green" > GeeksforGeeks </ h1 > < p > Type in the textbox to automatically count the words </ p > < textarea id = "word" oninput = "countWord()" rows = "10" cols = "60" > </ textarea > < br >< br > < p > Word Count: < span id = "show" >0</ span > </ p > < script > function countWord() { // Get the input text value var words = document .getElementById("word").value; // Initialize the word counter var count = 0; // Split the words on each // space character var split = words.split(' '); // Loop through the words and // increase the counter when // each split word is not empty for (var i = 0; i < split.length ; i++) { if (split[i] != "") { count += 1; } } // Display it as output document.getElementById("show") .innerHTML = count ; } </script> </ body > </ html > |
Выход:
Подход 3: поскольку два вышеупомянутых подхода могли подсчитывать слова только при написании в продолжении, дающем пробелы, но он не мог подсчитывать числа, когда каждое слово начинается с новой строки. Таким образом, этот подход сможет подсчитывать слова, начиная с новой строки.
Пример:
HTML
<!DOCTYPE html> < html > < body style = "text-align: center" > < h1 style = "color: green" >GeeksforGeeks</ h1 > < p >Type in the textbox to automatically count the words</ p > < textarea id = "word" rows = "10" cols = "60" > </ textarea > < br />< br /> < p > Word Count: < span id = "show" >0</ span > </ p > < script > document .querySelector("#word") .addEventListener("keyup", function countWord() { let res = []; let str = this.value.replace(/[
.?!]/gm, " ").split(" "); str.map((s) => { let trimStr = s.trim(); if (trimStr.length > 0) { res.push(trimStr); } }); document.querySelector("#show").innerText = res.length; }); </ script > </ body > </ html > |
Выход: