How to iterate over each letter of the header?

Question

JavaScript

I saw a cool animation on one site, when you hover over a line, animation appears on each letter individually, the letter changes color and proportions, very gracefully, just like soap balls))
I want to do something similar, when you hover over a certain letter, it will turn over, for example .
I do not know how to iterate over the line so that you can hang an event on each.
That's what came to my mind, but even it seems to me .. this is not right)) xD)
<h3 id="title">Основная информация</h3>

window.onload = function title() {
  let title = document.getElementById('title').textContent;
  let arr = [];
  for (var i = 0; i < title.length; i++) {
    arr = title.split('', title.length);
    var x = arr.indexOf(' ', 0);
    arr.splice(x, 1);
  }
  console.log(arr)
};

This is how I get an array

(18) ["О", "с", "н", "о", "в", "н", "а", "я", "и", "н", "ф", "о", "р", "м", "а", "ц", "и", "я"]

Then I think to iterate over the array and overwrite each character of the array in a span, and then insert everything together into the title, instead of the text. Get:

<h3 id="title"><span>О</span><span>с</span><span>н</span><span>о</span>..</h3>

after iterate over all spans and hang animation on onmouseover.
How is this done in general?

Answer 1

const title = document.querySelector('#title');
title.innerHTML = Array.from(title.innerText, n => `<span>${n}</span>`).join('');

or

const title = document.querySelector('#title');
title.innerHTML = title.innerText.replace(/./g, '<span>$&</span>');

https://jsfiddle.net/uwjg6qb3/