Javascript 用HTML元素中的替换等文本标记的嵌套？

我有一个带有内部HTML的div，看起来很像：

<b>First <span class="red">se</span></b><span class="red">cond third fo</span>urth fift<span class="large">h sixth</span>

此标记可以包含任何文本格式标记，因为它是文本编辑库的输出

对于我正在研究的东西，我需要删除任何存在的嵌套。因此，理想情况下，上述标记字符串应为：

<span style="font-weight:bold">First</span> <span style="font-weight:bold;color:red">se</span><span style="font-weight:bold">cond third fo</span><span>urth fift</span><span style="font-size:20px;">h sixth</span>

为了提供一些上下文，顶部的标记是Wysihtml5文本编辑器的输出，这非常有用，但我需要与第二个类似的标记才能尝试以下操作：

$(document).ready(function(){
    $('b').each(function(){ 
        var text = $(this).html();
        $(this).replaceWith('<span style="font-weight:bold;color:red">' + text + '</span>');
    });
});

---

小提琴手：

它看起来不像第一个应该是红色的，它是红色的。所有在标签之间的文本现在应该在标签之间。我不知道你从哪里读到的，但在问题中，OP写道预期结果应该从第一个开始。是的，你是对的。我只是想编写一个函数，用span替换任何标记，当然可以按照您的需要设置样式。也许我误解了这个问题。