JS-код для подсчета слов на странице, а не в html-файле

#javascript

Вопрос:

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

Из w3schools

 <!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My First Paragraph.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 3 9;
</script>

</body>
</html>

Этот код выводит значение 3 9, которое будет равно 12 в местоположении идентификатора. Я хочу посчитать слова на странице, в данном случае это будет 7 («Моя первая веб-страница» из h2 и «Мой первый абзац» из p. Я не уверен, как это сделать, но я предполагаю, что это будет что-то похожее на данный код.

Ответ №1:

Вы могли бы использовать HTMLElement.innerText его для получения текста веб-страницы. Затем вы могли бы использовать шаблон для разделения строки на массив с помощью пробелов. Тогда длина строки должна соответствовать вашему количеству слов.

 document.getElementById("demo").innerHTML = document.body.innerText.split(/s/).length

Ответ №2:

Я использую Boolean в качестве сокращения для фильтрации '' ложных значений, которые присутствуют после split .

 const allText = document.body.innerText;
const allWords = allText.split(/s/).filter(Boolean);
const numWords = allWords.length;

document.querySelector('#demo').innerHTML = numWords;

 <h2>My First Web Page</h2>
<p>My First Paragraph.</p>
<p id="demo" />

Развернуть фрагмент

Ответ №3:

Если при использовании javascript требуется innerText , то split(/s/).filter(Boolean)

Зачем использовать фильтр (логическое значение)?В javascript очень важно определить правильное слово.
Попробуйте, если вы используете только like innerText.split(/s/).length , получите другое количество.

Этот пример javascript

 document.getElementById("demo").innerHTML = document.getElementById("counted").innerText.split(/s/).filter(Boolean).length

 <!DOCTYPE html>
<html>

<body>
<div id="counted">
<h2>My First Web Page</h2>
<p>My First Paragraph.</p>
</div>

<p id="demo"></p>


</body>
</html>

Развернуть фрагмент

Пример jQuery, также

 var length = $("#counted").text().trim().replace(/[s] /g, " ").split(" ").length;
$('#demo').html(length);

 <!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<body>
<div id="counted">
<h2>My First Web Page</h2>
<p>My First Paragraph.</p>
</div>

<p id="demo"></p>

</body>
</html>

Развернуть фрагмент