检测段落是否包含指定子元素：脚本触发条件实现需求

我明白你现在卡在哪了——要给文档里的特定数字、符号动态加样式标签，但得先排除带<img>和自定义标签的段落，而且HTML集合的操作总是有点“反直觉”对吧？下面给你梳理一套可行的解决方案：

第一步：正确筛选符合条件的段落 #

首先要解决HTML集合的访问问题，因为原生HTMLCollection是动态的，遍历过程中修改DOM会导致集合自动更新，很容易出bug。所以第一步先把集合转成静态数组，再筛选出不包含禁止标签的段落：

方案1：用CSS选择器直接筛选（现代浏览器友好）

如果你的自定义标签是<my-tag1>和<my-tag2>，可以用:has()伪类一步到位筛选：

// 选择所有p标签，且其后代中没有img、my-tag1、my-tag2
const validParagraphs = Array.from(
  document.querySelectorAll('p:not(:has(img, my-tag1, my-tag2))')
);

:has()伪类已经被现代浏览器广泛支持，写法简洁高效。

方案2：手动遍历检查（兼容旧浏览器）

如果需要兼容IE这类老浏览器，就手动遍历过滤：

// 先把所有p标签转成静态数组
const allParagraphs = Array.from(document.querySelectorAll('p'));
// 筛选出不含禁止标签的段落
const validParagraphs = allParagraphs.filter(para => {
  // 检查段落内是否存在任何禁止的标签（所有后代都算）
  return !para.querySelector('img, my-tag1, my-tag2');
});

第二步：给目标内容添加样式标签 #

筛选出有效段落后，接下来要安全地替换段落里的数字/符号。这里不建议直接用innerHTML覆盖（容易破坏现有DOM事件或结构），推荐用TreeWalker遍历纯文本节点，只修改需要的内容：

// 定义要匹配的数字和符号（根据你的需求调整正则）
const targetPattern = /([0-9$%#@])/g;
// 要添加的样式类名
const styleClass = 'custom-highlight';

validParagraphs.forEach(para => {
  // 创建遍历器，只遍历纯文本节点
  const textWalker = document.createTreeWalker(
    para,
    NodeFilter.SHOW_TEXT,
    null,
    false
  );

  let currentNode;
  while (currentNode = textWalker.nextNode()) {
    // 避免重复处理已经加过样式的节点
    if (currentNode.parentNode.classList?.contains(styleClass)) continue;

    const originalText = currentNode.textContent;
    // 把匹配到的内容替换成带样式的span标签
    const newContent = originalText.replace(
      targetPattern,
      `<span class="${styleClass}">$1</span>`
    );

    // 临时容器解析HTML
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = newContent;

    // 替换原文本节点，插入新内容
    currentNode.parentNode.replaceChild(tempDiv.firstChild, currentNode);
    // 如果生成了多个节点，依次插入
    while (tempDiv.firstChild) {
      currentNode.parentNode.insertBefore(tempDiv.firstChild, currentNode.nextSibling);
    }
  }
});

为什么之前的方法可能失效？ #

1. 动态集合的坑：原生HTMLCollection是动态的，遍历过程中修改DOM会导致集合自动更新，出现跳过元素或重复处理的问题，转成数组就能避免。
2. 筛选逻辑不严谨：如果之前只检查了直接子元素（比如children），会漏掉嵌套在其他标签里的<img>或自定义标签，用querySelector能检查所有后代元素。

内容的提问来源于stack exchange，提问作者Brian Williams