你碰到的核心问题是：直接修改文本节点的data属性时，浏览器只会把它当作纯文本处理，不会解析其中的HTML标签。因为文本节点（nodeType == 3）本身就是用来存储纯文本内容的，没法识别HTML结构。

要解决这个问题，我们不能直接替换文本内容，而是需要把匹配到的文本节点替换成真正的DOM元素。下面是修改后的代码，完全可以实现你想要的渲染效果：

<script language="javascript">
function walkText(node) {
    if (node.nodeType == 3) {
        const regex = /Blah Blah Blah/gi;
        let match;
        let lastIndex = 0;
        const parent = node.parentNode;
        
        // 遍历所有匹配的内容
        while ((match = regex.exec(node.data)) !== null) {
            // 创建匹配前的文本节点（如果有的话）
            if (match.index > lastIndex) {
                parent.insertBefore(document.createTextNode(node.data.slice(lastIndex, match.index)), node);
            }
            
            // 创建外层span
            const outerSpan = document.createElement('span');
            outerSpan.style.fontFamily = 'elektora';
            
            // 组装内层内容
            outerSpan.appendChild(document.createTextNode('a'));
            
            const spanShen = document.createElement('span');
            spanShen.style.fontSize = '80%';
            spanShen.textContent = 'shen';
            outerSpan.appendChild(spanShen);
            
            outerSpan.appendChild(document.createTextNode(' g'));
            
            const spanLow = document.createElement('span');
            spanLow.style.fontSize = '80%';
            spanLow.textContent = 'low';
            outerSpan.appendChild(spanLow);
            
            outerSpan.appendChild(document.createTextNode(' g'));
            
            const spanAming = document.createElement('span');
            spanAming.style.fontSize = '80%';
            spanAming.textContent = 'aming';
            outerSpan.appendChild(spanAming);
            
            // 把创建好的DOM元素插入到原节点位置
            parent.insertBefore(outerSpan, node);
            
            lastIndex = regex.lastIndex;
        }
        
        // 处理匹配后的剩余文本（如果有的话）
        if (lastIndex < node.data.length) {
            parent.insertBefore(document.createTextNode(node.data.slice(lastIndex)), node);
        }
        
        // 删除原来的文本节点
        parent.removeChild(node);
    }
    
    if (node.nodeType == 1 && node.nodeName != "SCRIPT") {
        for (var i = 0; i < node.childNodes.length; i++) {
            walkText(node.childNodes[i]);
        }
    }
}
walkText(document.body);
</script>

关键思路解释： #

• 不再直接修改文本节点的data，而是拆分原文本内容，把匹配部分替换成手动创建的DOM元素
• 逐个创建需要的span元素，设置对应的样式和文本内容，然后把它们组装成你需要的嵌套结构
• 把拆分后的文本片段和新创建的DOM元素依次插入到原节点的位置，最后删除原来的纯文本节点

这样处理后，浏览器就能正确解析并渲染你想要的HTML结构了，不会再把标签当作纯文本显示。

内容的提问来源于stack exchange，提问作者ptrcao