之前接了个中英文互译的需求，比如用户打开网页，则自动将文本翻译成中文；
于是乎写了这篇文章，用于记录；
目前能想到的就是，每个文本去请求翻译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函数，触发自动翻译过程。
