插入跨度后合并文本节点 [英] Merging Text Nodes Together After Inserting Span
问题描述
我有一个扩展,用于存储/检索用户选择的DOM结构的一部分(总是选择屏幕上的文本)。在存储选择内容时,我将该部分放在SPAN标记中,并用黄色突出显示文本。这会导致所选文本周围的DOM结构分裂成各种文本节点。这对我造成了一个问题,因为当我尝试恢复此选择时(不刷新页面),它会在DOM结构被修改时导致问题。
I have an extension where I am storing/retrieving a section of the DOM structure (always a selection of text on the screen) the user has selected. When I am storing a selection, I enclose the section in a SPAN tag, and highlight the text in yellow. This causes the DOM structure around the selected text to split up into various text nodes. This causes a problem for me as when I try to restore this selection (without refreshing the page) it causes problems as the DOM structure has been modified.
我的问题是插入SPAN后,我是否防止DOM结构分裂?如果无法实现,那么在将SPAN标记移除到原始状态后,如何重新组合DOM结构?
My question is how do I prevent the DOM structure from splitting up after inserting the SPAN? If this cannot be achieved, how would I reassemble the DOM structure after removing the SPAN tag to its original state?
//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
<p>Hello there, how are you today</p>
//What the DOM looks like after insertion of SPAN
<p>
"Hello there, "
<span class="highlightYellow">how</span
" are you today"
</p>
推荐答案
您可以使用它来展开您的内容。
You can use this to unwrap your content.
$(".highlightYellow").contents().unwrap();
演示: http://jsfiddle.net/R4hfa/
这篇关于插入跨度后合并文本节点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!