javascripthtmlcssvisual-studio-codehttrack

How can I select all texts on VSCode which are color coded in white? (to ease manual webpage translation)


I am working on a project where it is required to copy a particular website using HTTrack (2 levels - Main Page and 1 link deep web pages only). In the copied website, I need to translate all texts into Hindi. It is recommended to hardcode the translated text onto index.html file, but not mandatory (just bonus points). There are a total of 120 pages and changing each of them one by one is extremely inefficient since I was given a timeline of 5 days.

Since the text I have to translate are in 'white' color in VSCODE, I was wondering whether it is possible to copy all the text that are white together so that I can translate and replace back the text. Looking for some suggestions on this.

So far I have manually copied the texts and pasted into google translate then copied the translated text back to VSCode. In 6 hours I have only managed to translate 2 pages. Will be grateful for any suggestions.


Solution

  • This sounds to me like an XY problem. I wouldn't use VS Code with the specific approach you are suggesting. There are plenty of other ways to tackle your problem. The approaches I'll suggest here will cover all the parts of pages that are written in the HTML source (not any strings that get rendered via JavaScript or CSS).

    Visit a live version of the site (if there isn't one already but you have the source files, then just use something like VS Code's "Live Server" extension to make it go live on your local machine), and then take one of the following approaches:

    1. If you are using the Chrome browser, go to the chrome://settings/languages page and change your browser's most preferred language to Hindi. Then just visit the site, and in the top right of the browser, click the translate icon button and select the page to be translated to Hindi. If you're concerned about privacy and security with respect to the contents being translated, see this: https://www.google.com/intl/en/chrome/privacy/whitepaper.html#translate, which says:

      If you do choose to translate a web page, the text of that page is sent to Google Translate for translation. Your cookies are not sent along with that request and the request is sent over SSL. This communication with Google's translation service is covered by the Google privacy policy.

      You'll need to scroll through the page contents and open up and collapsed sections for translate to apply everywhere, since it uses some lazy loading techniques to avoid a large up-front cost to the page translation. Once you've done that, then just use the browser's Save As... function (in the right click menu for the webpage) to save the translated page somewhere onto your local disk.

    2. Go into the developer console, set document.designMode = "on" (which basically turns contentEditable on for all elements, making them like editable text input fields in the rendered site), make all your edits by manual copying and pasting between the page contents and google translate, and then either use the browser's Save As... function (in the right click menu for the webpage), or use Chrome's Workspaces or Local Overrides features to make changes in the webpage get saved to your local disk more effortlessly.