Подсчитать количество повторяющихся слов на странице

Question

Хочу сделать javascript для браузерного дополнения Tampermonkey, который бы подсчитывал количество повторяющихся слов на странице (желательно в рамках одного класса) и выводил бы результат встраивая куда-нибудь на страницу.

Например: На странице 5 слов "Illustrations" и 17 слов "Photos".

Нужно создать новый <div>, поместив его после другого <div class="Hello"> на странице и вывести результат: Illustrations - 5 Photos - 17

Встраиваем результат в страницу:

let sales = document.createElement("div");
sales.className = 'ase';
document.querySelector('.Hello').before(sales);
sales.innerHTML = `<b><center>Illustrations: ${IllustrationsCount}, Photos: ${PhotosCount}</b></center>`;

Не знаю как подсчитать количество конкретных слов

Answer 1

Ниже я предоставил пример скрипта который делает подчет слов, это разумеется не единственный способ но делающий более менее все универсально. Код максимально прокомментировал но все равно могут понадобиться знания для его понимания. Я использую JSON.stringify которая выводит объект в таком виде { "слово": 1, "другое": 1 }

Затем убираю из этой записи ненужные скобки и кавычки. В регулярках \w+ обозначает слово из букв. Но для русских букв нужно указывать явный диапазоно [А-я]+ тут + — один или более символов (слово) , флаг g говорит о глобальном поиске, а не только первого слова.

let sales = document.createElement("div");
sales.className = 'ase';
const allWords = {}

// ищем все слова например по div, можно искать по всему *
const allDivs = Array.from(document.querySelectorAll('div'))

for (const div of allDivs){
  // для каждого div ищем все слова в нем через регулярку
  const words = div.textContent.match(/\w+|[А-я]+/g)
  for (word of words){
    if (allWords[word]){
      allWords[word] += 1 // если слово уже есть +1
    } else { 
      allWords[word] = 1 // если этого слова не было оно одно
    } 
  }
}
// преобразуем объект в текст и убираем лишние символы: ", {, }
const text = JSON.stringify(allWords).replace(/["{}]/g, ' ')

// вставляем текст в шаблон
sales.innerHTML = `<b><center>${text}</b></center>`;

// добавляем результаты на страницу
document.body.appendChild(sales)

<div>the Photo</div>
<div>фото</div>
<div>the Illustration</div>

Answer 2

Я думаю вам может подойти более простой вариант через innerText + RegExp:

/*
 * @param {String} selector - (DOMString e.g. String)
 * @param {String} word
 * @return {number}
 */
var count = function (selector, word) {
  var element = document.querySelector(selector);
  var result = 0;

  if (element && element.innerText) {  
    var re = new RegExp(word, 'g');
    var iterator = element.innerText.matchAll(re);
      
    result = Array.from(iterator).length;
  }

  return result;
};

// Ваш код добавления блоков на страницу
// ...
// sales.innerHTML = `... ${count('body', 'слово')} ... ${count('.Hello', 'Illustrations')}`;
// ...

Функцию выше можно сократить, например:

  var count = function (selector, word) {
    var element = document.querySelector(selector);

    return element && element.innerText
      ? [...element.innerText.matchAll(new RegExp(word, 'g'))].length
      : 0;
  }

БЛОГ НА HUSL

Подсчитать количество повторяющихся слов на странице

Ответы (2 шт):