¿Cómo saber si el texto seleccionado se encuentra dentro de un div específica

Question

Tengo dos divs como se muestra a continuación:

<div id="div1"> 
<p>something</p> 
<div><table><tr><td>Div1</td></tr></table></div> 
</div> 
<div id="div2"> 
<p>something else</p> 
<div><table><tr><td>Div2</td></tr></table></div> 
</div> 
<button type="button">Check</button> 

Ahora, quiero saber cuando se selecciona un texto y luego el botón pulsado, si el texto seleccionado está bajo "div1" o no. ¿Cómo puedo hacer eso?

Editar: Y la solución tiene que funcionar en IE-7 y superior.

Answer 1

La función elementContainsSelection() continuación devuelve un valor booleano que indica si el elemento especificado contiene la totalidad de la selección del usuario y funciona en todos los navegadores, incluyendo IE 6.

Demostración en directo : http://jsfiddle.net/eT8NQ/

Código:

function isOrContains(node, container) { 
    while (node) { 
     if (node === container) { 
      return true; 
     } 
     node = node.parentNode; 
    } 
    return false; 
} 

function elementContainsSelection(el) { 
    var sel; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.rangeCount > 0) { 
      for (var i = 0; i < sel.rangeCount; ++i) { 
       if (!isOrContains(sel.getRangeAt(i).commonAncestorContainer, el)) { 
        return false; 
       } 
      } 
      return true; 
     } 
    } else if ((sel = document.selection) && sel.type != "Control") { 
     return isOrContains(sel.createRange().parentElement(), el); 
    } 
    return false; 
} 

Answer 2

se podía observar un evento mouseup en cada div, y obligar a la siguiente método a la misma:

var endpoint = null 
function getselected(event){ 
    endpoint = event.target; 
    var t = ''; 
    if(window.getSelection){ 
    t = window.getSelection(); 
    }else if(document.getSelection){ 
    t = document.getSelection(); 
    }else if(document.selection){ 
    t = document.selection.createRange().text; 
    } 
    return t; 
} 

este método volverá entonces el texto seleccionado, se le dirá que el proceso de selección terminó en la div que disparó el evento. si necesita el punto de inicio, debe vincular un evento de mousedown a los divs, que almacenará el id de los elementos en una variable, para que pueda determinar el punto inicial y final del proceso de selección y descubrir qué divs están en medio.

var startpoint = null; 
function beginSelection(event){ 
    startpoint = event.target; 
} 

si el método getSelected devuelve una cadena vacía, debe restablecer el punto inicial y final.

Answer 3

algo como:

function checkSelection() { 
    function checkNode(node) { 
     do { 
      if(node.id == "div1") 
       return true; 
     } while(node = node.parentNode); 

     return false; 
    } 

    if(window.getSelection) { 
     var selection = window.getSelection(); 
     for(var i = 0, l = selection.rangeCount; i < l; i++) { 
      var range = selection.getRangeAt(i), start = range.startContainer, end = range.endContainer; 
      if(checkNode(start) || (start != end && checkNode(end))) 
       return true; 
     } 
    } 

    if(window.scelection && window.selection.createRange) { 
     var range = window.selection.createRange(); 
     if(range) 
      return checkNode(range.parentElement()); 
    } 

    return false; 
} 

Answer 4

@TimDown Esto siempre devuelve false si se trata de 'nodo' en el interior o no

if ((sel = document.selection) && sel.type != "Control") { 
    return isOrContains(sel.createRange().parentElement(), el); 
}