如何在WKWebView中实现网页全文本翻译替换功能？

你提出的方案完全可行，核心逻辑是通过JS与Swift的双向通信完成文本提取-翻译-替换的闭环，适配WKWebView的交互机制。但需要注意两个核心问题：一是避免误提取非网页内容（如脚本、样式代码），二是替换文本时保持原有DOM结构不被破坏。

1. 精准提取可翻译文本节点 #

遍历DOM树，过滤掉不需要翻译的标签（script、style、noscript、iframe等），仅保留纯文本节点，同时排除空白文本节点：

function collectTextNodes() {
  const excludedTags = new Set(['SCRIPT', 'STYLE', 'NOSCRIPT', 'IFRAME', 'OBJECT', 'EMBED']);
  const textData = [];
  let nodeId = 0;

  function traverse(node) {
    if (excludedTags.has(node.tagName?.toUpperCase())) return;
    
    if (node.nodeType === Node.TEXT_NODE) {
      const text = node.textContent.trim();
      if (text) {
        // 给节点添加临时标识，用于后续替换
        node.dataset.translateId = nodeId.toString();
        textData.push({ id: nodeId, content: text });
        nodeId++;
      }
    } else {
      // 递归遍历子节点
      for (const child of node.childNodes) {
        traverse(child);
      }
    }
  }

  traverse(document.body);
  return textData;
}

2. 与Swift通信传递文本 #

通过WKWebView的原生通信通道将收集到的文本数据传给Swift，支持两种方式：

// 方式1：主动发送给Swift（需提前在Swift端配置对应的messageHandler）
window.webkit.messageHandlers.translateHandler.postMessage(collectTextNodes());

// 方式2：通过evaluateJavaScript回调返回，适合Swift主动触发文本提取
// Swift端调用evaluateJavaScript("collectTextNodes()")即可在回调中接收结果

3. 接收翻译结果并替换文本 #

Swift将翻译后的文本（格式建议为[{id: 0, translated: "xxx"}, ...]）传回后，执行替换逻辑：

function replaceTranslatedText(translatedData) {
  translatedData.forEach(item => {
    const node = document.querySelector(`[data-translate-id="${item.id}"]`);
    if (node) {
      node.textContent = item.translated;
      // 移除临时标识，避免影响后续DOM操作
      delete node.dataset.translateId;
    }
  });
}

1. 批量处理减少通信开销：将所有待翻译文本一次性传给Swift，避免多次跨语言通信（WKWebView的JS与Swift通信存在一定性能开销）。
2. 监听DOM动态变化：对于SPA或动态加载内容的网页，使用MutationObserver监听DOM树变化，自动提取新添加的文本节点：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.addedNodes.length > 0) {
      const newTextData = [];
      let nodeId = Date.now(); // 用时间戳避免重复ID
      // 复用之前的traverse逻辑遍历新增节点
      function traverseNewNodes(node) {
        const excludedTags = new Set(['SCRIPT', 'STYLE', 'NOSCRIPT', 'IFRAME']);
        if (excludedTags.has(node.tagName?.toUpperCase())) return;
        if (node.nodeType === Node.TEXT_NODE) {
          const text = node.textContent.trim();
          if (text) {
            node.dataset.translateId = nodeId.toString();
            newTextData.push({ id: nodeId, content: text });
            nodeId++;
          }
        } else {
          node.childNodes.forEach(child => traverseNewNodes(child));
        }
      }
      mutation.addedNodes.forEach(node => traverseNewNodes(node));
      if (newTextData.length > 0) {
        window.webkit.messageHandlers.translateHandler.postMessage(newTextData);
      }
    }
  });
});

observer.observe(document.body, { childList: true, subtree: true });

3. 结合原生MLTranslate框架：苹果提供的MLTranslate支持离线翻译，稳定性比调用第三方API更高，可直接在Swift端完成翻译逻辑，无需依赖外部服务。
4. 预处理文本过滤：在JS端提前过滤掉重复文本、短文本（如单个字符），减少翻译请求量，提升整体效率。

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