插入跨度后合并文本节点
我有一个扩展，我存储/检索用户选择的DOM结构的一部分（总是在屏幕上选择文本）。 当我存储选择时，我将该部分包含在SPAN标记中，并以黄色突出显示该文本。 这会导致所选文本周围的DOM结构拆分为各种文本节点。 这对我来说是一个问题，因为当我尝试恢复此选择（不刷新页面）时，它会导致问题，因为DOM结构已被修改。
我的问题是如何在插入SPAN后阻止DOM结构拆分？ 如果无法实现这一点，在将SPAN标记移至其原始状态后，如何重新组合DOM结构？
//Insert the span var sel = restoreSelection(mootsOnPage[i].startXPath); var range = sel.getRangeAt(0).cloneRange(); var newNode = document.createElement('span'); newNode.className = 'highlightYellow'; range.surroundContents(newNode); //Original DOM structure Hello there, how are you today
//What the DOM looks like after insertion of SPAN "Hello there, " how</span " are you today"
您可以使用它来解开您的内容。
$(".highlightYellow").contents().unwrap();
演示： http ： //jsfiddle.net/R4hfa/
使用element.normalize（） 。
删除插入的范围后，可以使用element.normalize（）方法合并由于插入/删除范围而创建的额外文本节点。 normalize（）方法将指定的元素及其所有子树放入“规范化”forms（即子树中没有文本节点为空，并且没有相邻的文本节点）。 发现，感谢@ tcovo的评论。
如果插入节点然后将其删除，则元素内部的文本节点将被拆分。 不幸的是，一旦删除了额外的节点，它们就不会自动重新合并。 要回答人们关于“为什么”这一问题的问题，通常会在UI中使用文本突出显示时导致问题。
插入标记的行为将改变DOM。 根据定义，这就是你在调用surroundContents()时所做的事情。 您无法在不更改DOM的情况下添加span标记，其中包括拆分文本节点和为span添加新元素。
此外，除非所选文本仅包含整个文本节点，并且选择永远不会在文本节点的中间开始/停止，否则您必须拆分文本节点以将跨度放在正确的位置。 稍后删除span标记时，将有额外的文本节点。 这对任何事情都不重要，但如果你真的认为你必须让拆分文本节点恢复原状，我可以考虑几个选项：
1）在插入span之前保存原始parentNode。 克隆它，将您的span添加到克隆中，用克隆替换原始节点并保存原始节点。 如果要还原，请将原始文件放回原位并删除克隆的原件。
2）删除跨度时，运行一个查找相邻文本节点并组合它们的函数。
3）弄清楚为什么事后有更多的文本节点比以前更重要，因为这对任何代码或显示都无关紧要。
使用normalize()要注意！ 它将剥离像
normalize()很好，但它有它的缺点。
所以
"this is an "
"example"
将变成
this is an example
有没有办法使用normalize()但保留s？