Перевести все innerText в документе html с API Google Translate - PullRequest
Новая
       5

Перевести все innerText в документе html с API Google Translate

0 голосов
/ 19 января 2020

Я обращаюсь к этому URL с просьбой перевести текст с английского sh на испанский sh

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

и эффективно Я получаю переведенный текст на испанском sh, так что теперь я хочу получить динамически весь 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)
    });

1 Ответ

2 голосов
/ 19 января 2020

Попробуйте это: 

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 - вам потребуется рекурсивно go по всем элементам, начиная с нужного родительского тега (body, в вашем случае), и вызовите вышеуказанную функцию для каждого элемента, например: 

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

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

Примечания:

  1. Я использовал childNodes[0].nodeValue вместо innerHtml или innerText для хранения дочерних элементов.
  2. Обратите внимание, что go по всему DOM не рекомендуется и может привести к таким проблемам, как изменение script и style метки.
...