如何根据内容中的@media()匹配关联的DOM元素？

你的核心问题在于：原代码通过遍历所有元素并匹配outerHTML的方式，会把包含@media文本的父元素（比如示例中的<div>、<article>）都纳入结果，同时那些@media规则是独立的文本节点，而非元素内容，原逻辑无法建立规则与目标元素的关联。

以下是正确的实现方案，能精准匹配@media规则并关联到对应的DOM元素：

// 匹配@media规则的正则，兼容任意空白和换行
const MEDIA_REGEX = /@media\((\d+)\)\s+([\w\s-]+)/g;

function collectMediaRules() {
    const result = {};

    // 递归遍历DOM树，处理所有文本节点
    function traverse(node) {
        if (node.nodeType === Node.TEXT_NODE) {
            const text = node.textContent.trim();
            if (!text) return;

            // 提取当前文本节点中的所有@media规则
            let match;
            while ((match = MEDIA_REGEX.exec(text)) !== null) {
                const breakpoint = match[1];
                const classes = match[2].trim().split(/\s+/);

                // 找到当前文本节点的下一个有效元素节点（跳过空白文本节点）
                let nextElement = node.nextSibling;
                while (nextElement && nextElement.nodeType !== Node.ELEMENT_NODE) {
                    nextElement = nextElement.nextSibling;
                }
                if (!nextElement) continue;

                // 用元素标签名作为键（也可直接用节点对象本身，根据需求调整）
                const nodeKey = nextElement.tagName;
                // 初始化结构
                if (!result[nodeKey]) result[nodeKey] = {};
                if (!result[nodeKey][breakpoint]) result[nodeKey][breakpoint] = { classes: [] };
                
                // 添加类名并去重（可选，若不需要去重可删除Set相关代码）
                result[nodeKey][breakpoint].classes.push(...classes);
                result[nodeKey][breakpoint].classes = [...new Set(result[nodeKey][breakpoint].classes)];
            }
        }

        // 递归遍历子节点
        for (const child of node.childNodes) {
            traverse(child);
        }
    }

    traverse(document.body);
    return result;
}

// 调用示例
const mediaRules = collectMediaRules();
console.log(mediaRules);

代码逻辑说明 #

1. 遍历文本节点：递归遍历DOM树，只处理文本节点，避免匹配无关元素。
2. 解析规则：用正则提取@media中的断点值和类名列表。
3. 关联目标元素：找到当前文本节点的下一个兄弟元素（跳过空白文本节点），建立规则与元素的对应关系。
4. 结构构建：按照你期望的格式，将规则整理到对应元素的结构下，同时支持去重类名。

原代码问题总结 #

• 遍历所有元素会匹配到包含@media文本的父元素，导致结果冗余。
• 未针对文本节点处理@media规则，无法建立规则与目标元素的关联，自然无法提取规则内容。

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