javascript - 如何判断父元素的开头或结尾是否存在文本？ 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

应该不会比

难多少

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

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

为避免出现空文本节点的问题，您可以在其前面加上

node.normalize()

哪个

Puts the specified node and all of its subtree into a "normalized" form. In a normalized subtree, no text nodes in the subtree are empty and there are no adjacent text nodes.

参见 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