给出以下HTML片段:
<div>
<p>
abc <span id="x">[</span> def <br /> ghi
</p>
<p>
<strong> jkl <span id="y">]</span> mno </strong>
</p>
</div>
我需要一个算法来使用Javascript在#x和#y之间获取Text类型的所有节点.或者是否有一个JQuery函数正是这样做的?
然后,上面示例生成的Text节点(忽略空白节点)将是:
['def', 'ghi', 'jkl']
最佳答案:
以下适用于使用DOM方法且没有库的所有主流浏览器.它还忽略了问题中提到的空白文本节点.
强制性的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);