Как подсчитать количество слов в текстовом поле с помощью JavaScript?

Опубликовано: 1 Декабря, 2021

В этой статье описывается подход к вычислению количества слов в заданном вводе текста. Это может быть полезно в сценариях, когда пользователю рекомендуется ввести определенное количество слов, и счетчик слов может отслеживать то же самое. Ниже рассматриваются два подхода:

Подход 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 >

Выход: