Как найти и сложить числа в тексте с помощью JavaScript

Как найти и сложить числа в тексте с помощью JavaScript

30.08.2023
612
Пошаговая инструкция как с помощью JavaScript на странице сайта найти все числа в тексте, сложить их и вывести сумму - пример кода и объяснение.

На странице есть элемент с текстом:

<div id="some_text">
  У Маши 5 яблок, у Сергея 12. 
</div>

Всего у ребят <span class="result"></span> яблок.

Необходимо:

  1. Найти в тексте все числа
  2. Сложить их
  3. Вывести сумму в тег <span class="result">

Решение

Реализуем поиск и суммирование чисел в функции:

// Функция для подсчета суммы чисел
function sumNumbers(selector) {

  // Получаем текст элемента 
  let element = document.querySelector(selector);
  let text = element.textContent;


  // Создаем регулярное выражение
  let regex = /\d+/g;

  // Ищем числа и помещаем в массив
  let numbers = text.match(regex);

  // Объявляем переменную для суммы
  let sum = 0;

  // Перебираем массив с числами
  for(let i = 0; i < numbers.length; i++) {
    
    // Преобразуем в число и прибавляем к сумме
    sum += parseInt(numbers[i], 10);

  }

  // Возвращаем сумму 
  return sum;

}

// Вызываем функцию
let total = sumNumbers('#some_text');

// Выводим результат 
let resultElement = document.querySelector('.result');
resultElement.innerHTML = total;

Пояснение:

  1. Получение текста элемента
  2. Создание регулярного выражения
  3. Поиск чисел и помещение в массив
  4. Перебор массива и суммирование
  5. Возврат результата
  6. Вывод результата на страницу

Таким образом, используя JavaScript, можно гибко извлекать числовые данные из текста и выполнять с ними различные вычисления.