检查DOM元素和子元素是否包含任何文本[JS或jQuery]

Check if DOM element and children contains any text [JS or jQuery]

本文关键字：元素 JS 文本 jQuery DOM 是否 何文本 包含任 检查      更新时间：2023-09-26

我希望能够检查元素中是否包含任何文本。如果元素中没有任何文本，我希望能够删除该元素。

但是，这个dom元素可能包含一个或多个子元素，这些子元素也可能包含其他子元素。因此，我希望能够遵循元素的dom树，并在其中的所有元素中搜索文本。

类似这样的东西：

<div id="myElement">
  <span></span>
  <span></span>
  <span>
    <span></span>
    <span>b</span>
  </span>
</div>

现在div直接没有任何文本，但是它的子级有。如何检查整个div中是否有文本？

编辑：

显然，我在其中一个跨度中有一个&#8203;字符，我知道这是一个零宽度的空白。因此，基本上，即使没有文本，jQuery text（）也会将其作为一个文本，并返回false。

我该如何避开它？

这些答案都不使用innerText，这可能是最简单的。

innerText获取当前节点和所有子节点的渲染文本。

因此，为了检查节点的子树中是否有文本，可以使用以下一行：

myNode.innerText.trim() === '';

如果此表达式的计算结果为true，则myNode或其子级中没有文本。

jQuery的text()方法包括子体，因此： 
$('.my-element-class').each(function() {
    if ( $(this).text() === '' ) {
        $(this).remove();
    }
});

要单独检查所有子元素，我们必须稍微复杂一点：

$('.my-element-class').find('span').andSelf().each(function() {
    ...

http://api.jquery.com/text/

遍历myElement的所有子代并检查它们的html（）。如果值不为空"，则递归地迭代该对象。

$( "#myElement" ).find( "*" ).each( function(){
   var $element = $(this);
   if ( $.trim( $element.html() ).length == 0 )
   {
     $element.remove();
   }
});

只需使用jQuery函数text（）来检查里面是否有任何文本（它将忽略里面的html标记，所以不必担心里面的孩子。）如果您想删除空白，可以使用trim。

var text = $('#myElement').text();
var trimedText = text.trim();

删除零宽度空白：

var text = trimmedText.replace(/['u200B'uFEFF]/gm,'');

JS解决方案

这个函数递归地检查和删除空元素（无论是否嵌套），它还处理空白空间问题。

        function removeEmptyElements(elem) {
            var childNodes = elem.childNodes;
            var allEmpty = true;
            for (var index in childNodes) {
                if (childNodes[index]) {
                    if (childNodes[index].nodeType === 3 && !/^'s*$/.test(childNodes[index].textContent)) {
                        allEmpty = false;
                    }
                    else if (childNodes[index].nodeType === 1) {
                        if (!childNodes[index].hasChildNodes()) {
                            //here childNodes[index] is the empty element
                            childNodes[index].parentNode.removeChild(childNodes[index]);
                        } else {
                            //do a recursive call to check whether any of the nested elements are empty
                            removeEmptyElements(childNodes[index]);
                        }
                        allEmpty = false;
                    }
                }
            }
            if (allEmpty) {
                //here elem is the empty element
                elem.parentNode.removeChild(elem);
            }
        }

将"根"元素（示例中为myElement）传递给函数removeEmptyElements。

换句话说，它是这样的：

  • 获取根元素的所有子节点。

  • 默认情况下，假设所有子节点都是空的/空白的。

  • 遍历每个子节点。

  • 如果其中一个子节点不是非空白文本，则将allEmpty设置为false，因为现在已经知道根元素不是空的

  • 否则，如果子节点是有效元素：

    • 检查它是否有任何子节点，如果没有，请将其删除

    • 如果它有子节点，则使用该元素执行递归调用

    • 由于现在已经知道根元素包含有效元素，因此不再认为它是空的，因此将allEmpty设置为false。

  • 如果allEmpty没有设置为false，那么根元素是空的，因此您可以删除它。

相关文章：