В этой статье описывается подход к вычислению количества слов в заданном вводимом тексте. Это может быть полезно в сценариях, когда пользователю рекомендуется ввести определенное количество слов, и счетчик слов может отслеживать то же самое. Существует два подхода, которые обсуждаются ниже:
Подход 1:
Вычисление количества пробелов, присутствующих в тексте
Этот метод основан на количестве пробелов, присутствующих во входной строке, для подсчета количества слов, поскольку каждое слово в предложении разделено пробелом. Определена функция countWord (), которая принимает текст, присутствующий в текстовой области, и подсчитывает количество пробелов, присутствующих в ней. Вводимый текст в области текста выбирается с помощью метода getElementById ().
Недостатком этого метода является то, что несколько пробелов между словами будут засчитываться как несколько слов, следовательно, это может привести к ненадежности подсчета слов.
Пример:
<!DOCTYPE html>
<html>
<body style="text-align: center;">
<h1 style="color: green">
GeeksforGeeks
</h1>
<p>
Type in the textbox and click on
the button to count the words
</p>
<textarea id="inputField" rows=10 cols="60">
</textarea>
<br><br>
<button onclick="countWords()">
Count Words
</button>
<br><br>
<p> Word Count:
<span id="show">0</span>
</p>
<script>
function countWords() {
// Get the input text value
var text = document
.getElementById("inputField").value;
// Initialize the word counter
var numWords = 0;
// Loop through the text
// and count spaces in it
for (var i = 0; i < text.length; i++) {
var currentCharacter = text[i];
// Check if the character is a space
if (currentCharacter == " ") {
numWords += 1;
}
}
// Add 1 to make the count equal to
// the number of words
// (count of words = count of spaces + 1)
numWords += 1;
// Display it as output
document.getElementById("show")
.innerHTML = numWords;
}
</script>
</body>
</html>
Выход:
Подход 2:
Разделение слов на основе пробелов, а затем подсчет количества слов
В этом подходе мы улучшаем недостаток предыдущего подхода, разделяя слова на основе символа пробела, а затем проверяя, что каждое разделение не является только символом пробела. Функция countWord() вызывается каждый раз, когда пользователь вводит что-либо в текстовую область, используя обработчик события oninput в текстовой области.
Пример:
<!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:
Поскольку два вышеупомянутых подхода могли подсчитывать слова только при написании в продолжении с пробелами, но не могли подсчитывать числа, когда каждое слово начинается с новой строки. Таким образом, этот подход позволит подсчитать слова, начинающиеся с новой строки.
Пример:
<!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("input", function countWord() {
let res = [];
let str = this.value.replace(/[\t\n\r\.\?\!]/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>
Выход:
