How to replace text of each DOM node using jQuery?

Question

I would like to know how I could parse the DOM using jQuery and modify the text of each node in order to translate a page of my site. Using jQuery is a constraint, not a choice :)

To be more precise, I would like to go through the DOM, to target each node which contains text, to translate it using an API and to replace the original text with the translated one.

I feel a little bit lost even if it seems pretty simple. Thanks for your help!

Dominik Schreiber · Accepted Answer · 2022-01-12 13:47:51Z

1

If I get you correctly, you will have something like

// use $('*') instead if you really want to use jQuery
Array.from(document.querySelectorAll('*')).forEach(async _ => {
  _.textContent = await myTranslationApi(_.textContent);
});

However, I will have to say that it a) is slow to render the page with the wrong language and then replace it (this could also lead to flash of untranslated text) and b) might be error-prone to simply feed the textContent into your translation API (you probably want to search for translation keys and only replace them).

answered Jan 12, 2022 at 13:47

Dominik Schreiber

2,8111 gold badge26 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CodeKiwi Over a year ago

Thanks a lot, I will try this. To be honest with you, the problem is a little bit more complex than my question. I asked for jQuery solution but I am working on server side translation with PHPQuery, a library that my company uses as a sort of templating engine. I hate it :D And, I just need to translate the emails we send to our customers, I call our Database for registered translation and an API the new ones which are then stored into the DB too. Thanks again, if your answer solves the problem I will mention it :)

Collectives™ on Stack Overflow

How to replace text of each DOM node using jQuery?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related