我目前正在研究一个项目，该项目允许用户插入支持嵌入式CSS的文本，并能够使用竖线（|）来打断单词。
我有一个可以正确打断单词的功能，但是如果打断了，样式似乎并不适用于所有单词。
https://jsfiddle.net/ace8kxms/
这是应该发生的几个例子。
方案1：
输入：
<span style="color: red">The quick|brown fox</span>
预期输出：
<span style="color: red">The quick</span>|<span style="color: red">brown fox</span>
方案2：
输入：
The quick <span style="font-size: 10px;">brown|fox</span> jumps over the lazy dog<br>
预期输出：
The quick <span style="font-size: 10px;">brown</span>|<span style="font-size: 10px;">fox</span> jumps over the lazy dog
方案3：
输入：
<span style="color: red">The <span style="font-size: 10px;">quick brown|<span style="text-decoration: underline;">fox</span></span>|jumps over|the <span style="font-size: 10px;">lazy dog</span></span><br>
预期输出：
<span style="color: red">The <span style="font-size: 10px;">quick brown</span></span>|<span style="color: red"><span style="font-size: 10px;"><span style="text-decoration: underline;">fox</span></span></span>|<span style="color: red">jumps over</span>|<span style="color: red">the <span style="font-size: 10px;">lazy dog</span></span>