如何移除Google Translate脚本翻译页面时自动添加的font标签

使用Google Translate脚本翻译页面时，会自动插入带有translate="no"属性的<font>标签，以下是移除这些标签同时保留内容的解决方案：

方法：通过DOM监听自动清理 #

利用MutationObserver监听页面DOM变化，一旦检测到Google Translate添加的font标签，立即执行清理逻辑：

// 清理Google Translate生成的font标签
function removeGoogleTranslateFontTags() {
  const targetFontTags = document.querySelectorAll('font[translate="no"]');
  targetFontTags.forEach(tag => {
    const parentNode = tag.parentNode;
    // 将font标签内的所有子节点移到父节点下
    while (tag.firstChild) {
      parentNode.insertBefore(tag.firstChild, tag);
    }
    // 删除空的font标签
    parentNode.removeChild(tag);
  });
}

// 监听DOM变化，触发清理
document.addEventListener('DOMContentLoaded', () => {
  const domObserver = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      // 检查是否新增了目标font标签
      const hasTargetFont = Array.from(mutation.addedNodes).some(node => 
        node.nodeType === Node.ELEMENT_NODE && 
        node.tagName === 'FONT' && 
        node.getAttribute('translate') === 'no'
      );
      if (hasTargetFont) {
        // 延迟执行确保翻译操作完全完成
        setTimeout(removeGoogleTranslateFontTags, 100);
      }
    });
  });

  // 监听整个body的子节点变化，包括子树
  domObserver.observe(document.body, {
    childList: true,
    subtree: true
  });
});

说明 #

1. 该脚本会自动识别Google Translate生成的特定font标签（带有translate="no"属性），避免误删页面原有font标签
2. 通过MutationObserver实现实时监听，无需手动触发，适配翻译后的动态DOM变化
3. 清理过程仅移除font标签外壳，完全保留标签内的文本、子元素等内容

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