Проверка того, содержит ли элемент HTML примитивный текст?

Question

Возьмите этот HTML:

<div id="el1"> 
    <div id="el2"> 
    <div id="el3"> 
     Hello 
     <div id="el4"> 
     World 
     </div> 
    </div> 
    </div> 
</div> 

Обратите внимание, что el3 и el4 содержат примитивный текст; а именно «Hello» и «World». Другие элементы (el1 и el2) содержат только другие элементы.

И все же, используя чистый JavaScript, все их свойства innerHTML указывают, что они содержат некоторую форму текста.

Как можно использовать чистый JavaScript для проверки того, содержит ли конкретный элемент примитивный текст в качестве дочернего. В этом случае метод также распознает el3 как содержащий примитивный текст (хотя он также содержит и следующий элемент).

Что-то вроде этого:

var els = getElementByTagName("*"); 

for(var i = 0; i < els.length; i++){ 

    if(/* element contains text */){ 

    // do something 

    } 
} 

Является ли это на самом деле просто работа для регулярных выражений? Со всеми свойствами HTMLElement вы бы подумали, что будет лучший способ.

Нет jQuery, спасибо.

Answer 1

innerHTML получает HTML, и все элементы, кроме последнего, содержат HTML, поскольку они вложены.

Например, innerHTML из #el2 будет

<div id="el3"> 
     Hello 
     <div id="el4"> 
      World 
     </div> 
    </div> 

Чтобы получить только текст, современные браузеры поддерживают либо innerText или textContent (светлячок).
Тогда есть пробелы, так что вы, вероятно, следует обрезать() текст, а также, так что-то вроде этого

var els = document.querySelectorAll("#wrapper *"); 

for(var i = 0; i < els.length; i++){ 
    var el = els[i].cloneNode(true); 
    var children = el.children; 

    for (var j=children.length; j--;) el.removeChild(children[j]); 
    var content = el.innerText ? el.innerText : el.textContent; 

    if(content.trim().length){ 
     // do something 
     console.log(els[i].getAttribute('id') + ' has text'); 
    } 
} 

FIDDLE

или контроль NODETYPE и nodeValue текстовых узлов

var els = document.querySelectorAll("#wrapper *"); 

for(var i = 0; i < els.length; i++){ 
    var el = els[i]; 
    var children = el.childNodes; 

    for (var j=children.length; j--;) { 
     if(children[j].nodeType === 3 && children[j].nodeValue.trim().length) { 
      // do something 
      console.log(els[i].getAttribute('id') + ' has text'); 
     } 
    } 
} 

FIDDLE

Answer 2

Вы указываете разницу между узлами элементов и текстом n odes через свойство nodeType. myelementnode.nodeType вернет 1, mytextnode.nodeType вернет 3.

как следует из названия, getElementsByTagName даст вам только узлы элемента. то, что вы хотите сделать, это использовать свойство childNodes вашего корневого узла, которое вы получите всех непосредственных детей этого узла как нодлиста. поэтому для el1 вы получите только один дочерний узел el2.

Вам необходимо рекурсивно пройти через каждый дочерний узел, чтобы получить его дочерние объекты, пока вы не нажмете узел с типом 3 - текст.

поэтому для el3 он вернет 2 дочерних узла. Первый будет вашим текстом, вторым будет ваш элемент el4. Затем вам нужно войти в el4, чтобы получить его дочерний узел.

внутреннийHTML возвращает строку (фрагмента html, преобразованного в строку), а не узлов.вы можете использовать это и регулярное выражение, чтобы отбросить все, что находится в пределах < и>, но это немного грубо, а с большими кусками html будет дорогостоящий процесс.

Answer 3

Вот пример того, как можно использовать nodeType, чтобы помочь вам получить ваш ответ:

var els = document.getElementsByTagName("*"); 

for (var i = 0; i < els.length; i++) { 
    var hasTextNode = false; 
    var currChildren = els[i].childNodes; 

    for (var j = 0; j < currChildren.length; j++) { 
     if ((currChildren[j].nodeType === Node.TEXT_NODE) && 
      (!(/^\s*$/.test(currChildren[j].textContent)))) { 
       hasTextNode = true; 
       break; 
     } 
    } 

    window.console.log(els[i].id + ((hasTextNode) ? " has" : " does not have") + " a Text Node"); 
} 

Применяя это к HTML, который вы предоставили результаты в этом в консоли:

el1 does not have a Text Node 
el2 does not have a Text Node 
el3 has a Text Node 
el4 has a Text Node 

Примечание: важно проверить найденные текстовые узлы для содержимого «только пространство», поскольку DOM рассмотрит все отступы и отступы в исходном коде как «текстовый узел». Очевидно, вы хотели бы игнорировать их.