Expand Text Nodes - Split HTML Text Content into Individual Text Nodes for Each Character

expandTextNodes.js

// Unless the characters are individually inserted, the text content of HTML is grouped together in 
// only as many text nodes are necessary to contain it. For example, the following markup will have only two text nodes: 
//
// <span>first text node!<strong>second text node!</strong></span>
//
// Sometimes, however, you might want each character of text to exist as SEPARATE text nodes. This will do that. As a 
// result, the afforementioned markup will contain 33 text nodes, rather than only two.

const expandTextNodes = (element) => {
  [...element.childNodes].forEach((child) => {
    if (child.nodeValue) {
      child.nodeValue.split("").forEach((c) => {
        child.parentNode.insertBefore(document.createTextNode(c), child);
      });

      child.remove();
      return;
    }

    expandTextNodes(child);
  });
};