如何确定父元素的开头或结尾是否存在文本？ HTML DOM 和 JavaScript

Question

假设我们有一个嵌套跨度：

<span><span></span></span>

我们想知道文本是否存在

<span> here <span> </span></span>

或

<span><span></span> here</span>

假设我们引用了父元素节点。

请注意

<span> text <span> text </span> text </span>

或

<span> text <span> text </span></span>

是两种完全可能的情况。

Answer 1

不确定这是不是最好的方法，但这是我的解决方案首先出现在我的脑海中：

HTML：

<span id="span1">
    thththt
    <span id="span2"></span>
</span>

JS：

var span = document.getElementById('span1');
var spanChilds = span.childNodes;
var textIndex = -1;

for(var i = 0; i < spanChilds.length; ++i){
    debugger;
    if(spanChilds[i].nodeType == 3){
        textIndex = i;
        break;
    }
}

var nestSpan = document.getElementById('span2');
var nestSpanIndex = Array.prototype.indexOf.call(span.childNodes, nestSpan);

if(nestSpanIndex > textIndex){
    alert('text first')
}else{
    alert('span first')
}

Example 上 jsFiddle

Answer 2

因此，使用@weeklyTea 回答中的一些概念，我将三个函数组合在一起，为所提出的问题提供答案。

我认为要指出的重要一点是，我们总是有一个嵌套元素节点。而且我们“不确定”元素节点的两侧是否有文本节点。当它这样说时，我认为这些功能将相当简单：

function isNestedHighlightAtEnd(parent) {
    var childNodes = parent.childNodes;
    var childNodesLength = childNodes.length;

    if( childNodes[childNodesLength-1].nodeType != 3 ) {
        return true;
    }
    else {
        return false;
    }
}

function isNestedHighlightAtMiddle(parent) {

    if( !isNestedHighlightAtBeg( parent ) && !isNestedHighlightAtEnd( parent )) {
        return true;
    }
    else {
        return false;
    }                
}

function isNestedHighlightAtBeg(parent) {
    var childNodes = parent.childNodes;
    var childNodesLength = childNodes.length;

    if( childNodes[0].nodeType != 3) {
        return true;
    }
    else {
        return false;
    } 
}

Answer 3

应该不会比

node.firstChild && node.firstChild.nodeType === Node.TEXT_NODE || 
  node.lastChild && node.lastChild.nodeType === Node.TEXT_NODE

为了可读性，最好使用Node.*_NODE 符号常量（尽管它们可能未在旧浏览器中定义）。

为避免出现空文本节点的问题，您可以在此之前添加

node.normalize()

哪个

将指定节点及其所有子树放入“规范化” 形式。在规范化子树中，子树中没有文本节点为空 并且没有相邻的文本节点。

见https://developer.mozilla.org/en-US/docs/Web/API/Node.normalize。

省略注释节点和纯空格文本节点：

var children = Array.prototype.filter.call(node.childNodes || [], function(node) {
  return node.nodeType !== Node.COMMENT_NODE &&
    (node.nodeType !== Node.TEXT_NODE || /\S/.test(node.nodeValue));
}),
    firstChild = children[0],
    lastChild = children[children.length-1];

return firstChild && firstChild.nodeType === Node.TEXT_NODE ||
  lastChild && lastChild.nodeType === Node.TEXT_NODE;

如果由于某种原因检查是否有潜伏在其中的子元素很重要，那么添加检查就足够了

!!node.children.length