如何跨越多个元素进行范围选择？

代码：http://jsfiddle.net/byHMP/2/如何跨越多个元素进行范围选择？

（注：如果选择得当，该代码将插入一个跨度周围的选择和改变背景颜色）

选择代码：那么，现在

var html = ""; 

sel = window.getSelection(); // not sure how many browsers this works on. 
var temp = document.createElement("div"); 

for (var i = 0, len = sel.rangeCount; i < len; ++i) { 
    curr_range = sel.getRangeAt(i); 

    temp.appendChild(curr_range.cloneContents()); 

    if (temp.innerHTML.length < MINIMUM_SELECTION_LENGTH) { 
     return false; 
    } 

    var selection = document.createElement("span") 
    //selection.id = content_hash; 
    curr_range.surroundContents(selection); 

    selection = $j(selection).addClass("highlighted"); 

} 
html = temp.innerHTML;

，它只会在元素内进行选择，而MAYBE如果覆盖整个元素以及文本的左侧和右侧...

也许我需要找到一种方法来扩展到某个方向的选择如果标签不匹配？我只是不知道。（另外，我不知道该怎么做，我的意思是，我可以将选择范围扩展到整个父元素（例如，当你只想选择多个LI时，我觉得这有点矫枉过正大多数情况下）

来源

2011-11-03 NullVoxPopuli

您是否可以更具体地了解您要达到的确切效果？这些问题是否涵盖了这些问题？http： //stackoverflow.com/questions/3223682/change-css-of-selected-text-using-javascript/3224513#3224513，http://stackoverflow.com/questions/6285154/javascript-surroundcontents-on-selection-doesnt-像预期的那样工作 - 如果使用的是平价/ 6286445＃6286445 –

第一个没那么多。第二个解释我的问题。如果我的选择包含不匹配的标记，那么在选择具有有效的HTML（所有标记匹配）之前是否无法展开选区？ – NullVoxPopuli

我并不清楚。如果你只是想改变整个选择的背景颜色，那么第一个答案适用。如果你想应用任意样式，我对第二个问题的回答也可以帮助你。将选择想象成包含有效的HTML可能没有帮助;相反，将其视为文档中从一个点到另一个点的范围会更有帮助，因为它会在路上收集几个节点（每个节点可能有部分选定的节点）。然后，您可以依次对每个选定节点执行操作（例如，在一个范围内将其包围）。 –

的Range#surroundContents要求所有选定的元素都包含在范围内与其最接近共同祖先元素。否则，它抛出一个BAD_BOUNDARY_ERR。

为了解决这个问题，你需要像下面这样。

var node = document.createElement(tagName); 
var frag = range.extractContents(); 
node.appendChild(frag); 
range.insertNode(node); 
if (!range.collapsed) { 
    range.removeContents() 
}

来源

2011-11-03 20:36:47

我知道这个错误。你的代码会产生一些奇怪的行为。如果你跨越了divs，它会分裂div，并创建一个对...没问题，只是，不是我正在寻找的东西。如果有一种方法可以扩展选择范围，以便所有标签都具有匹配的结尾，那将是理想的。 – NullVoxPopuli

是的，代码分割元素。如果只有内联元素在范围内，应该可以。如果可以有块元素，则需要迭代它们并为每个块创建一个较小的范围。 –

并非所有内容都可以内联= \ – NullVoxPopuli

如何跨越多个元素进行范围选择？

回答

相关问题