2010-12-09 15 views
5

Dado el siguiente código HTML-Fragmento:¿Cómo puedo encontrar todos los nodos de texto entre los nodos de elementos con Javascript/JQuery?

<div> 
    <p> 
    abc <span id="x">[</span> def <br /> ghi 
    </p> 
    <p> 
    <strong> jkl <span id="y">]</span> mno </strong> 
    </p> 
</div> 

Necesito un algoritmo para recuperar todos los nodos del tipo de texto entre #x y #y con Javascript. ¿O hay una función JQuery que hace exactamente eso?

Los nodos de texto resultantes (nodos de espacio en blanco ignorados) para el ejemplo anterior serían entonces:

['def', 'ghi', 'jkl'] 
+0

¿Quieres agarrar los nodos de texto o de sus contenidos (cuerda)? –

+0

Además, tenga en cuenta que hay más de 3 nodos de texto entre esos dos SPAN. (Creo que 5, pero no estoy seguro) –

+0

@Sime: Quiero tomar los nodos de texto. –

Respuesta

7

Los siguientes obras en todos los principales navegadores utilizando métodos DOM y no biblioteca. También ignora los nodos de texto en espacio en blanco como se menciona en la pregunta.

jsFiddle obligatoria: http://jsfiddle.net/timdown/a2Fm6/

function getTextNodesBetween(rootNode, startNode, endNode) { 
    var pastStartNode = false, reachedEndNode = false, textNodes = []; 

    function getTextNodes(node) { 
     if (node == startNode) { 
      pastStartNode = true; 
     } else if (node == endNode) { 
      reachedEndNode = true; 
     } else if (node.nodeType == 3) { 
      if (pastStartNode && !reachedEndNode && !/^\s*$/.test(node.nodeValue)) { 
       textNodes.push(node); 
      } 
     } else { 
      for (var i = 0, len = node.childNodes.length; !reachedEndNode && i < len; ++i) { 
       getTextNodes(node.childNodes[i]); 
      } 
     } 
    } 

    getTextNodes(rootNode); 
    return textNodes; 
} 

var x = document.getElementById("x"), 
    y = document.getElementById("y"); 

var textNodes = getTextNodesBetween(document.body, x, y); 
console.log(textNodes); 
+0

En lugar de 'document.body' creo que puedo usar el nodo primario común tanto del nodo de inicio como del nodo final como nodo raíz. –

+0

@ user375773: De hecho, estoy de acuerdo que sería mejor. Lo omití por simplicidad. –

0

El ejemplo siguiente utiliza jQuery para encontrar cualesquiera dos elementos que son uno junto al otro y puede o no puede tener nodos de texto entre ellos. Este ciclo foreach verificará los elementos resultantes para encontrar nodos de texto y agregarlos a la lista.

function getTextNodes() { 
    var list = []; 
    $(document.body).find("*+*").toArray().forEach(function (el) { 
     var prev = el.previousSibling; 
     while (prev != null && prev.nodeType == 3) { 
      list.push(prev); 
      prev = prev.previousSibling; 
     } 
    }); 
    return list; 
} 
Cuestiones relacionadas