I can toggle the content of the div with the string above, but I wish to include the ability to parse that string before output, so I can translate its language before its output.
I can easily do this once the html is output into the content div using the JS HTML DOM, but due to this conversion not being instant I'm looking into ways of translating this text before it is output, so changing the string stored in the variable html.
The only way I found to parse a string of HTML is XML DOM. e.g:
Code:
function translateText (html)
{
document.getElementById('test').value = html;
if (window.DOMParser)
{
parser = new DOMParser();
xmlDoc = parser.parseFromString(html,"text/xml");
}
else
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.loadXML(html);
}
span = xmlDoc.getElementsByTagName('span');
alert(span[0].childNodes.length);
for (var i = 0; i < span[0].childNodes.length; i++)
{
alert(span[0].childNodes[i].nodeValue);
}
}
I assumed this would do the job to parse html, but when I alert the length of span's childNodes it outputs 6, which is incorrect, and if I then go on to output the node values of each of the children, they are all blank or null.
My aim is to parse the string and replace and node with an id starting with 't' with its translated text, which I am doing using a google language api function. The translation is not a problem, Its the parsing of the HTML string thats the problem at the moment.
The function is use to parse the HTML DOM is as follows:
Code:
function changeLanguage() {
var infoContainer = document.getElementById('textContainer');
for (var i=0; i<infoContainer.childNodes.length; i++)
{
if (typeof(infoContainer.childNodes[i].id) != "undefined")
{
if (infoContainer.childNodes[i].id.substring(0, 1) == "t")
{
translateObj(infoContainer.childNodes[i])
}
}
}
Where translateObj() replaces the nodeValue of the child, with the translated text. So basically Im hoping to achieve this without loading the HTML string onto the page first.
Let me get this straight, do you want to replace just the text node of the html element or do you want to dynamically create the id for the element also?
Why don't you just break up the html string and just insert some variables into it with concatenation?
like...
var month;
var html = "<div id=/"tmonth/">" + month + "<//div>";
and just use your translation function to do the work beforehand?
Sorry, I forgot to add this bit in. This is a problem i've been fighting from the start. The HTML is created by PHP, I've tried to think of a way of incorporating the JS in the PHP creation of the HTML and I've hit a dead end.
I like the idea, its just the inclusion in the PHP class I'm having trouble working out.
If it's any help i've attached the PHP that creates the HTML:
okay I have one Idea. How about in your php script, instead of dynamically inserting the text values into the html hard code the name of the javascript variable that will be used to insert the text value plus the concatenation syntax so that the text value can be inserted with javascript later on the client side.
Then create more strings in your php, one for each text node and pass the strings to the javascript like so,
Code:
var month = "Month that was chosen with php backend and passed to javascript";
var html = "<div id=/"tmonth/">" + month + "<//div>";
this way you will be able to do operations in javascript before it is output and if it doesn't need translating then then it is simply output unchanged.
you could also make a copy of the default version when making the translation like
Code:
var month = "Month that was chosen with php backend and passed to javascript";
if (needs translating) {
tmonth = translate(month);
{
else {
tmonth = month;
}
var html = "<div id=/"tmonth/">" + tmonth + "<//div>";
this way you can add better functionality to toggle between languages because you can store the translations as they are created.
[RESOLVED] Parse HMTL before output
Reply With Quote
Bookmarks