JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo">помогите реализовать. при помощи javascript хочу сделать, чтоб каждый символ введенный в div contenteditable="true" находился в теге  span</div>

CSS

span {
    border-right: solid 1px green;
}

JavaScript

/**
 * recursively get all text nodes as an array for a given element
 */
function getTextNodes(node) {
    var childTextNodes = [];

    if (!node.hasChildNodes()) {
        return;
    }

    var childNodes = node.childNodes;
    for (var i = 0; i < childNodes.length; i++) {
        if (childNodes[i].nodeType == Node.TEXT_NODE) {
            childTextNodes.push(childNodes[i]);
        }
        else if (childNodes[i].nodeType == Node.ELEMENT_NODE) {
            Array.prototype.push.apply(childTextNodes, getTextNodes(childNodes[i]));
        }
    }

    return childTextNodes;
}

/**
 * given a text node, wrap each character in the
 * given tag.
 */
function wrapEachCharacter(textNode, tag) {
    var text = textNode.nodeValue;
    var parent = textNode.parentNode;

    var characters = text.split('');
    var elements = [];
    characters.forEach(function(character) {
        var element = document.createElement(tag);
        var characterNode = document.createTextNode(character);
        element.appendChild(characterNode);

        parent.insertBefore(element, textNode);
    });

    parent.removeChild(textNode);
}

// create a wrapper element that will hold our HTML.
var container = document.getElementById('foo');

// get all text nodes recursively.
var allTextNodes = getTextNodes(container);

// wrap each character in each text node thus gathered.
allTextNodes.forEach(function(textNode) {
    wrapEachCharacter(textNode, 'span');
});