I’m trying to load my HTML until my JS code translates it using PHP. I’d then like to retrieve the content of this translated HTML. I’ve done a lot of research but I can’t seem to do it.
Here’s the code of my HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Translate Page</title>
</head>
<body>
<div id="content">
<p>This example displays a simple translate button, with no text.</p>
<p>This example displays a simple translate button, with no text.</p>
<div class="notranslate">
<p>This is a paragraph.</p>
<p>
A particle is kept at rest at the top of a sphere of diameter (42 m). When disturbed slightly,
it slides down. At what height ( h ) from the bottom, the particle will leave the sphere <br>
(a) ( 14m )<br>
(b) ( 16m )<br>
(c) ( 35m )<br>
(d) ( 70m )
</p>
</div>
</div>
<script>
function translateContent() {
const allTextNodes = getAllTextNodes(document.body);
const textContent = allTextNodes.map(node => node.textContent.trim()).join(' ');
// Translate content to French using Google Translate
fetch('https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=fr&dt=t&q=' + encodeURIComponent(textContent))
.then(response => response.json())
.then(data => {
const translatedText = data[0].map(sentence => sentence[0]);
replaceTextNodes(allTextNodes, translatedText.join(' '));
})
.catch(error => console.error('Error translating content:', error));
}
function getAllTextNodes(element) {
const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
const textNodes = [];
while (walker.nextNode()) {
textNodes.push(walker.currentNode);
}
return textNodes;
}
function replaceTextNodes(nodes, newText) {
let currentIndex = 0;
nodes.forEach(node => {
if (node.nodeType === Node.TEXT_NODE) {
const originalText = node.textContent.trim();
const newTextSlice = newText.slice(currentIndex, currentIndex + originalText.length);
node.textContent = newTextSlice;
currentIndex += originalText.length;
}
});
}
// Trigger translation on page load
window.onload = translateContent;
</script>
</body>
</html>
I had tried this:
<?php
require 'vendor/autoload.php';
use JonnyWPhantomJsClient;
// Create a PhantomJS client instance
$client = Client::getInstance();
// Set the path to the PhantomJS binary
$client->getEngine()->setPath('/usr/local/bin/phantomjs');
// Open a webpage
$request = $client->getMessageFactory()->createRequest('translateHTMLUsingJs2.html', 'GET');
// Set the timeout for script execution (in milliseconds)
$request->setTimeout(2000);
// Render the webpage
$response = $client->getMessageFactory()->createResponse();
// Send the request and receive the response
$client->send($request, $response);
// Output the rendered HTML content
echo $response->getContent();
But it doesn’t work as I’d hoped. Can you help me to do it in PHP please?
Anyone will be a great help. Please don’t hesitate to comment or give me a solution…
New contributor
Richardson is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.