Я создаю приложение, которое использует Google API для перевода текста. Приложение работает нормально, однако, если я пытаюсь перевести слово, использующее внешний ключ, På, например, в запросе API, кажется, опускается 'å' и выдается ответ P. Это происходит со всеми словами с неанглийскими буквами. .
Чтобы сделать вещи еще более странными, я создаю небольшое веб-расширение, которое использует window.addEventListener для захвата слова с веб-страницы. Использование этого метода для отправки слов в API не вызывает проблем.
Вот код, который работает. Скрипт содержимого выбирает слово и отправляет его в background.js. Фоновый скрипт берет это слово и отправляет его во всплывающее окно. При нажатии кнопки выбранное слово отправляется в Google API, а перевод отправляется обратно.
Скрипт содержимого:
window.addEventListener('mouseup', checkWord);
function checkWord() {
let word = window.getSelection().toString();
console.info(word);
if (word.length > 0) {
let message = {
text: word,
}
chrome.runtime.sendMessage(word)
}
}
Фоновый сценарий:
chrome.runtime.onMessage.addListener(receiver);
function receiver(request, sender, sendResponse) {
console.info(request);
word = request;
}
Наконец, моя функция всплывающей страницы, которая вызывается нажатием кнопки:
function sendToAPI() {
let bgpage = chrome.extension.getBackgroundPage();
let word = bgpage.word;
console.info(word)
if (word.length> 0 && word.length< 100){
$.ajax({
type: 'GET',
url: `https://translation.googleapis.com/language/translate/v2?q=${word}&target=en&source=no&key=${API_KEY}`,
}).then(function(response) {
translated =response.data.translations[0].translatedText;
$('.word').empty();
$('.word').append(`${word} | ${translated}`);
return translated;
}).catch(function(err) {
sendReverse();
})
}
}
Вот часть другого кода, которая не работает. req.query.q - это слово, которое вставляется в поле ввода. Кроме того, я могу удалить `req.query.q и вставить слово прямо в это место, и вызов API по-прежнему не работает.
//GET request to Google Translate API
router.get('/', (req,res)=>{
console.info(req.query);
axios.get(`https://translation.googleapis.com/language/translate/v2?q=${req.query.q}&target=${req.query.target}&source=${req.query.source}&key=${process.env.GOOGLE_API_KEY}`)
.then(response => {
if (req.query.q == response.data.data.translations[0].translatedText){
res.send('reverse')
} else {
console.info(response.data.data)
res.send(response.data)
}
}).catch(err=> {
console.info(err)
})
})



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вам нужно правильно кодировать специальных символов с encodeURIComponent(), либо следующим образом:
....?q=${encodeURIComponent(word)}....
или отдельно:
var encodedWord = encodeURIComponent(word);
//
....?q=${encodedWord}....
Кодирование необходимо для параметров URL, для всего, что не является обычным печатаемым / видимым символом ASCII (включая пробелы). То, что вы делаете с getSelection, не связано с URL-адресом, это прямой вызов функции.
спасибо, это правильное решение. Знаете ли вы, почему слово нужно закодировать после копирования и вставки, но не тогда, когда я использую
window.getSelection, чтобы получить слово?