子孫テキストノードを取得してテキストを1文字ずつ分割しタグで囲う

JavaScriptt (ES6以降)

/**
 * テキストを1文字ずつ分割しタグで囲う
 * @param {Node} baseElem 基準となる親要素
 * @param {string} [wrapTagName="span"] 囲う要素のタグ名
 */
const splitTextCharWrapEachTag = (baseElem, wrapTagName = 'span') => {
	/**
	 * 子孫テキストノードを取得
	 * @param {Node} parentNode 親要素
	 * @returns {Node[]} 取得したテキストノードを返す
	 */
	const getDescendantTextNodes = (parentNode, childNodes = []) => {
		parentNode.childNodes.forEach(childNode => {
			if (childNode.nodeType === 3) {
				childNodes.push(childNode);
			} else if (childNode.nodeType === 1) {
				getDescendantTextNodes(childNode, childNodes);
			}
		});

		return childNodes;
	};

	const textLineNodes = getDescendantTextNodes(baseElem);

	textLineNodes.forEach(textLineNode => {
		const chars = textLineNode.textContent.split('');

		if (!chars.length) return true;

		chars.forEach(char => {
			let charNode;

			if (char.match(/^\s+$/)) {
				charNode = document.createTextNode(char);
			} else {
				charNode = document.createElement(wrapTagName);
				charNode.textContent = char;
			}

			textLineNode.parentNode.insertBefore(charNode, textLineNode);
		});

		textLineNode.remove();
	});
};

JavaScript

splitTextCharWrapEachTag(document.querySelector('.code-block code'));