Modify the DOM?

[gustaf123]

Hi
I want to send a selected text to the google translator (

http://www.google.com/translate_t)

and insert the translated text on the fly into the DOM of the page, so that it replaces the old text.
Now the problem: I only send the text to google translate and get a text back (without the tags) - but how do I keep the html-tags, so that when I insert the translated text into the DOM, it displays correctly?

For example you have "<div>Some text and <b>some bold</b> words.</div>". The user selects "Some text and some bold words.", it gets translated, and inserted back in as "Etwas Text und einige fette Wörter." But the tags are missing and it doesn't display correctly.

I do it this way:

var range = text.getRangeAt(0);
range.deleteContents();
newnode = document.createElement("a");
newnode.appendChild(document.createTextNode(translated_text));
range.insertNode(newnode);

How can I overcome this and re-insert the tags in the right place?

Any help would be appreciated.

 

[BillyRayPreachersSon]

You can't, unless you happen to know which words in the translated text are bold and which are not... and if this is the case, you may as well do your own translation.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Diancecht]

What happens if you send to the translator the html code?

Cheers,
Dian

 

[adam0101]

I tested google's translator with HTML code. It treats it as part of the text, so the translation isn't what you'd expect.

If you can get the HTML of the user's selection, you could translate each piece of text between the tags separately, then join them back together with the tags. However, the translation may differ if the tags break up the flow of the sentence. For example, "¿cómo <p> eres?" would become "how <p> you are?" instead of "how <p> are you?". If you can live with this, here's an example of how to do it:

<script>
function translateHtml(text){
  var tags = text.match(/<[^>]*>/g);
  var textParts = text.replace(/<[^>]*>/g,"|").split("|");
  var output = "";

  if(textParts.length == 1) return translate(textParts[0]);
  
  for(i=0; i<textParts.length; i++){
    output += translate(textParts[i]);
    if(tags.length > i) output += tags[i];
  }
  return output;
}

function translate(str){
  if(str == "") return "";

  [green]// Add your translation logic here
  // I'm just using toUpperCase() as a 
  // mock translation for testing purposes.[/green]
  str = str.toUpperCase(); 

  return str;
}

[green]// Example usage[/green]
alert(translateHtml("<div>Some text and <p><b>some bold</b></p> words.</div>"));
</script>

Adam

http://adameslinger.blogspot.com/