Selenium如何按原顺序提取WhatsApp消息内混合的文本与emoji内容

问题原因 #

你当前的代码分别独立抓取普通文本和emoji元素，没有遵循DOM节点的原始排布顺序，因此会出现所有文本在前、所有emoji在后的错位问题。

核心实现思路 #

直接遍历消息容器内部的所有子节点（包含文本节点、emoji元素节点），按节点的原始先后顺序分别处理：

• 遇到emoji的img标签，取alt属性存储的表情字符
• 遇到普通文本节点，取文本内容后按需清理多余的引号、空格即可

可直接运行的代码 #

chats = driver.find_elements_by_class_name("message-in")
for chat in chats:
    messages = chat.find_elements_by_class_name("i0jNr")
    for msg in messages:
        # 调用JS遍历子节点保证顺序
        full_content = driver.execute_script("""
            const innerSpan = arguments[0].querySelector('span');
            let parts = [];
            innerSpan.childNodes.forEach(node => {
                // 处理emoji元素
                if (node.nodeType === 1 && node.tagName === 'IMG' && node.classList.contains('emoji')) {
                    parts.push(node.alt);
                }
                // 处理普通文本
                else if (node.nodeType === 3) {
                    // 清理文本多余的引号和首尾空格
                    let text = node.textContent.trim().replace(/^"|"$/g, '');
                    if (text) parts.push(text);
                }
            });
            // 返回拼接后的完整内容，要逐行输出拆分元素可直接返回parts数组
            return parts.join(' ');
        """, msg)
        print(full_content)

如果需要逐行输出每个拆分元素，只需要把JS代码中最后的return parts.join(' ')改为return parts，再遍历返回的数组逐个打印即可。

效果验证 #

针对你提供的HTML结构，上述代码输出结果完全符合预期：😅 how 👹 are you 🎂

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