如何在跨度中包装每个字母，并保持正常的分词符和子元素

要在文本中为每个字母添加跨度（span）标签，同时保持正常的分词符和子元素，可以使用JavaScript来实现。以下是一个示例代码，展示了如何实现这一功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wrap Each Letter</title>
    <style>
        .letter {
            display: inline-block;
            border: 1px solid #000;
            padding: 2px;
            margin: 2px;
        }
    </style>
</head>
<body>
    <div id="content">
        This is a sample text with some <strong>bold</strong> and <em>italic</em> elements.
    </div>

    <script>
        function wrapEachLetter(element) {
            const content = element.innerHTML;
            const words = content.split(' ');
            const wrappedWords = words.map(word => {
                return word.split('').map(letter => `<span class="letter">${letter}</span>`).join('');
            });
            element.innerHTML = wrappedWords.join(' ');
        }

        const contentElement = document.getElementById('content');
        wrapEachLetter(contentElement);
    </script>
</body>
</html>

解释

HTML结构：
- 创建一个包含文本和子元素（如<strong>和<em>）的<div>元素。

CSS样式：
- 为每个字母添加一个简单的样式，以便可以看到包裹的效果。
JavaScript逻辑：
- wrapEachLetter函数接受一个DOM元素作为参数。
- 获取元素的innerHTML内容。
- 将内容按空格分割成单词数组。
- 对每个单词进行处理，将其按字符分割，并为每个字符添加<span>标签。
- 将处理后的单词重新组合成一个字符串，并设置回元素的innerHTML。