如何使用Javascript/JQuery找到元素節點之間的所有文本節點？

考慮下面的HTML片段：如何使用Javascript/JQuery找到元素節點之間的所有文本節點？

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

我需要一個算法來#x和#y使用JavaScript之間取類型文本的所有節點。或者有沒有一個JQuery函數可以做到這一點？然後

所得到的文本節點爲上面的例子（忽略空白節點）將是：使用DOM方法，並沒有圖書館在所有主要瀏覽器

['def', 'ghi', 'jkl']

來源

2010-12-09 Martin Andert

是否要抓取文本節點或其字符串內容？ – 2010-12-09 13:24:26

另外請注意，這兩個SPAN之間有超過3個文本節點。（我認爲5，但我不確定） – 2010-12-09 13:27:07

以下的作品。它也會忽略問題中提到的空白文本節點。

強制性的jsfiddle：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);

來源

2010-12-09 14:28:37

下面的示例使用jQuery來找到與彼此相鄰的任何兩個元件，並且可以或可以不具有它們之間的文本節點。這個foreach循環將檢查結果元素以找到任何文本節點並將它們添加到列表中。

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; 
}

來源

2015-02-08 12:59:44

如何使用Javascript/JQuery找到元素節點之間的所有文本節點？

回答

相關問題