之前接了个中英文互译的需求,比如用户打开网页,则自动将文本翻译成中文;
于是乎写了这篇文章,用于记录;
目前能想到的就是,每个文本去请求翻译api,然后返回翻译内容并替换;
但网页的文本元素错综复杂,本文章只写一篇例子,并讲解其中的原理;
注:翻译api需要自备哦~,本文章不提供;
本代码块支持所有网页内的文本请求翻译,注意是所有,WP也试过了,夏柔都尝试过,无一例外都会翻译;
当然支持多种语言,具体看你的翻译api给你返回的都是什么内容,比如你给他发送中文,他给你返回的一个文本内容,则将那个文本内容替换过来;
废话不多说,上代码例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自动翻译示例</title> <!-- 引入 jQuery --> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> </head> <body> <h1>你好,世界!</h1> <p>这是一个要翻译的示例网页。</p> <div id="fullscreen-text"> <p>夏柔公益,提供更多的公益产品。</p> <!-- Add more paragraphs as needed --> </div> <!-- 引入自动翻译脚本 --> <script> async function translateText(text) { const apiUrl = `https://api.aa1.cn/ydfanyi/?type=1&text=${encodeURIComponent(text)}`; try { const response = await fetch(apiUrl); const data = await response.json(); if (data && data.TargetText) { return data.TargetText; } else { console.error("翻译失败"); return text; // 返回原始文本 } } catch (error) { console.error("发生错误", error); return text; // 返回原始文本 } } // 替换页面中的文本 async function replacePageText() { // 获取所有文本节点 const allTextNodes = document.createTreeWalker( document.body, NodeFilter.SHOW_TEXT, null, false ); let currentTextNode; // 遍历所有文本节点 while ((currentTextNode = allTextNodes.nextNode())) { const originalText = currentTextNode.nodeValue.trim(); // 排除空白节点 if (originalText !== "") { // 翻译文本 const translatedText = await translateText(originalText); // 替换文本 currentTextNode.nodeValue = translatedText; } } } // 在页面加载完成后执行替换 window.addEventListener("load", replacePageText); </script> </body> </html>
演示视频
讲解
async function translateText(text) { ... }
: 定义了一个异步函数translateText
,用于将传入的文本进行翻译。它使用了一个API(https://api.aa1.cn/ydfanyi/)来获取翻译结果。async function replacePageText() { ... }
: 定义了另一个异步函数replacePageText
,用于替换页面中所有文本节点的内容。它通过调用translateText
函数来获取翻译后的文本,并将其替换到原始文本节点中。window.addEventListener("load", replacePageText);
: 在页面加载完成后,执行replacePageText
函数,触发自动翻译过程。