使用 google 翻译 api 翻译文档 html 中的所有 innerText

Question

我正在请求此 url 将文本从英语翻译成西班牙语

URL: https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=es&dt=t&q=Hello

我正在有效地将文本翻译成西班牙语，所以，现在我想动态地获取正文文档中的所有 innerText，然后再放入翻译文本，我该怎么做？

简单来说，我想通过单击按钮动态翻译网站。

这是我开始的示例代码：

let textToBeTranslate =["hello","thanks","for","help me"]
var url = "https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=es&dt=t&q="+textToBeTranslate;

  fetch(url)
    .then(data => data.json()).then(data => {
      //Text translated to spanish
      var textTranslated = data[0][0][0].split(", ");
      console.log(textTranslated)
         //output: ["hola gracias por ayudarme"]
         //Now i want to dinamically put translated text in body tag again          
    }).catch(error => {
      console.error(error)
    });

Answer 1

试试这个：

const translateElement = async element => {
    const
        elementNode = element.childNodes[0],
        sourceText = elementNode && elementNode.nodeValue;

    if (sourceText) 
        try {
            const
                url = 'https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=es&dt=t&q=' + sourceText,
                resultJson = await fetch(url),
                result = await resultJson.json(),
                translatedText = result[0][0][0].split(', ');

            elementNode.nodeValue = translatedText;
        } catch (error) {
            console.error(error);
        }
    }
}

对于单个元素 - 只需调用它，如下所示：

(async () => await translateElement(document.body))();

对于 DOM 中的所有元素 - 您将需要从所需的父标记（body，在您的情况下）开始递归遍历所有元素，并为每个元素调用上述函数元素，像这样：

(async () => {
    const
        parent = 'body',
        selector = `${parent}, ${parent} *`,
        elements = [...document.querySelectorAll(selector)],
        promises = elements.map(translateElement);

    await Promise.all(promises);
})();

备注：

我使用 childNodes[0].nodeValue 而不是 innerHtml 或 innerText 保留子元素。
请注意，不建议遍历整个 DOM，这可能会导致更改 script 和 style 标签等问题。

使用 google 翻译 api 翻译文档 html 中的所有 innerText

Translate all innerText in document html with google translate api

javascript

google-translate