ピクセルからの範囲

Question

範囲がある場合は、getBoundingClientRectで境界矩形を取得できます。逆は可能ですか？つまり、ピクセルの矩形がある場合、Rangeを作成します。

Answer 1

はい、いいえ。

だけ範囲を作成する場合は範囲​​が（ほとんどのブラウザで複数の場所にテキストを選択することはできませんので、これは、一般的なケースでは可能ではありません例えば、高さ、あなたの「ピクセルの矩形は、」複数のテキストである場合ライン）。あなたが言及する「ピクセルの矩形」は、より正確にはクリッピング矩形であることに注意してください。

複数のの範囲に同意すると、これが可能です。主な考え方は、クリッピング矩形の各行に対して1つの範囲を作成することです。選択は画面に表示されませんが（ほとんどのブラウザは複数の選択をサポートしていないため）、少なくともクリッピング矩形内にあるテキストを抽出できます。これは私がそれを実装する方法です：

var columnModeSelection = { 
    startX:10, 
    startY:10, 
    endX:20, 
    endY:30, 
    selectedTextRanges:null // an Array of Range 
}; 
createColumnModeSelection(); 

/** 
Emulates MSIE function range.moveToPoint(x,y) by returning the selection node info which corresponds to the given x/y location. 
@param x the point X coordinate 
@param y the point Y coordinate 
@return the node and offset in characters as {node,offsetInsideNode} (e.g. can be passed to range.setStart) 
*/ 
function getSelectionNodeInfo(x, y) { 
    var startRange = document.createRange(); 
    window.getSelection().removeAllRanges(); 
    window.getSelection().addRange(startRange); 

    // Implementation note: range.setStart offset is 
    // counted in number of child elements if any or 
    // in characters if there is no childs. Since we 
    // want to compute in number of chars, we need to 
    // get the node which has no child. 
    var elem = document.elementFromPoint(x, y); 
    var startNode = (elem.childNodes.length>0?elem.childNodes[0]:elem); 
    var startCharIndexCharacter = -1; 
    do { 
     startCharIndexCharacter++; 
     startRange.setStart(startNode, startCharIndexCharacter); 
     startRange.setEnd(startNode, startCharIndexCharacter+1); 
     var rangeRect = startRange.getBoundingClientRect(); 
    } while (rangeRect.left<x && startCharIndexCharacter<startNode.length-1); 

    return {node:startNode, offsetInsideNode:startCharIndexCharacter}; 
} 

/** 
Copy user selection to clipboard in plain text. 
Multibrowser: supported under MSIE and WebKit 
*/ 
function createColumnModeSelection() { 
    // build a TextRange for each line to select 
    var startY = columnModeSelection.startY; 
    columnModeSelection.selectedTextRanges=new Array(); 
    while (startY<columnModeSelection.endY) { 

     // select the line 
     var range = null; 
     if (document.selection) { 
      // MSIE 
      // Implementation note: the TextRange cannot be created from pixel 
      // coordinates, only the start point can. Thus, we are creating two 
      // TextRanges with a start point and set the end point of the first 
      // range to the start point of the end range. 

      // set the start point    
      range = document.selection.createRange(); 
      range.moveToPoint(columnModeSelection.startX, startY); 
      // set the end point   
      var endRange = document.selection.createRange(); 
      endRange.moveToPoint(columnModeSelection.endX, startY); // set the first line end 
      range.setEndPoint("EndToStart", endRange); 
      // create the selection 
      range.select(); 
     } else { 
      // other browsers 
      var lineStartNodeInfo = getSelectionNodeInfo(columnModeSelection.startX, startY); 
      var lineEndNodeInfo = getSelectionNodeInfo(columnModeSelection.endX, startY); 
      range = document.createRange(); 
      range.setStart(lineStartNodeInfo.node, lineStartNodeInfo.offsetInsideNode); 
      range.setEnd(lineEndNodeInfo.node, lineEndNodeInfo.offsetInsideNode+1); 
     } 

     // keep the selection for later usage 
     if (range!=null) { 
      columnModeSelection.selectedTextRanges.push(range); 
     } 

     // go to the next line 
     var elem = document.elementFromPoint(columnModeSelection.startX, startY); 
     var lineHeight = elem.clientHeight; 
     startY += lineHeight; 
    } 

    // clear the last selected range 
    if (document.selection) { 
     // MSIE 
     document.selection.empty(); 
    } else { 
     // Safari, Firefox 
     window.getSelection().removeAllRanges(); 
    } 
} 

これは、以下のブラウザでテストされています：

• MSIE 7、MSIE 9
• Firefoxの5、Firefoxの10
• クローム9
• Safari 5

Answer 2

私はこれを最近選択しました。 Rangeをサポートするブラウザでは、範囲を作成して選択するので、選択したものを取り除くのは簡単です。

Select from pixel coordinates for FF and Google Chrome