Обрабатывать текстовые узлы, которые не являются элементами сценария или стиля

Question

У меня есть базовый код для обработки всех текстовых узлов:

function walk (node) {
    if (node.nodeType == '3') {
        handleText (node)
    }
    node = node.firstChild
    while (node) {
        walk (node)
        node = node.nextSibling
    }
}

К сожалению, он обрабатывает все текстовые узлы, включая такие элементы, как <script> и <style>, которыеЯ не хочу.Я обновил свой код до следующего, чтобы игнорировать эти конкретные элементы:

function walk (node) {
    if (node.nodeType == '3' && node.tagName != 'SCRIPT' && node.tagName != 'STYLE') {
        handleText (node)
    }
    node = node.firstChild
    while (node) {
        walk (node)
        node = node.nextSibling
    }
}

Однако это не работает.Что я делаю не так?

Answer 1

Проверка тега должна быть на родительском узле:

function walk(node) {
  if (node.nodeType == 3 && !/SCRIPT|STYLE/.test(node.parentNode.tagName)) handleText(node);
    
  for (node = node.firstChild; node; node = node.nextSibling) walk(node)
}

Answer 2

A node с nodeType из 3 будет текстовым узлом .Поскольку звучит так, как будто вы хотите исключить обход текстовых узлов, которые являются дочерними из script или style тегами, вы должны поместить тест в другом месте - только walk(node), если tagName не SCRIPT ИЛИ STYLE, так что родительский тег <script> / <style> не повторяется в первую очередь:

function walk (node) {
  if (node.nodeType === 3) {
    handleText (node);
  }
  node = node.firstChild;
  while (node) {
    const { tagName } = node;
    if (tagName !== 'SCRIPT' && tagName !== 'STYLE') {
      walk (node);
    }
    node = node.nextSibling;
  }
}

(также обратите внимание, что nodeType вычисляется как целое число, поэтомувместо этого вы можете использовать строгое равенство ===)

Чтобы избежать цикла и переназначения while, вы можете использовать forEach вместо:

function walk (node) {
  if (node.nodeType === 3) {
    handleText (node);
    return;
  }
  Array.prototype.forEach.call(
    node.childNodes,
    (childNode) => { 
      const { tagName } = childNode;
      if (tagName !== 'SCRIPT' && tagName !== 'STYLE') {
        walk (child);
      }
    }
  );
}