jQuery search/replace all body text problems

Question

I am doing a complex language translation in jQuery. I am copying some of the methods used in the jQuery/Google translate, but using our own XML files for getting original English and translated languages.

I am able to easily read English and other language into an array.

But my problem is that some of these text phrases, that we are paying someone to have translated, are going to be inside other sentences inside many different pages.

I have been blasting away, trying different approaches, and still no real luck in finding a useable solution.

In past efforts, I have used the $('body').nodesContainingText() from jQuery-translate, to parse through each text node, then search for that text inside the English array, grab that position, and use that to get the translated version in the other language array.

And that works fine where there are separate text nodes, but still not even close to consistently working on partial replacing.

Seems the more I try to fix the problem, the less it works.

So what I'd really like is some guidance about what I am doing wrong?

Here is the code I am using, maybe this will help.

http://crosenblum.pastebin.com/f6468aae8

Answer 1

It seems like you might want to try using <span> tags around the sub-section of the text. Something like this:

<!-- Header up to Here -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacinia 
vehicula interdum. Nam aliquet auctor mollis. Suspendisse non orci arcu, id 
commodo augue. Aliquam quam enim, mollis in lacinia quis, pretium scelerisque 
leo. Cras volutpat arcu sit amet purus malesuada non bibendum sem euismod. 
Fusce ut augue in eros imperdiet <span class="translateMe">interdum. Mauris 
eleifend rhoncus lacinia. Vivamus auctor scelerisque nulla</span>, sed 
consectetur velit sodales porttitor. Nullam a neque eget mauris blandit facilisis. 
Nunc bibendum enim vel est venenatis ac posuere ligula condimentum. Nullam tortor 
neque, bibendum eget vestibulum at, interdum in diam.</p>
<!-- Rest of HTML after Here -->

This way you can not only do the $('body').nodesContainingText(), but you can also do $('span.translateMe') to retrieve the nodes to translate.