how to use jQuery to convert html page content into another language and consider special characters?

Question

I have a jquery code that I use to convert/translate page content.

this works fine but some of the texts on my page has special characters or extra .(dots).

and this causes an issue in my code and the translation fails.

here's the complete code:

(function($){
  $.fn.translate = function(options) {

    var that = this; //a reference to ourselves
  
    var settings = {
      css: "trn",
      lang: "en"/*,
      t: {
        "translate": {
          pt: "tradução",
          br: "tradução"
        }
      }*/
    };
    settings = $.extend(settings, options || {});
    if (settings.css.lastIndexOf(".", 0) !== 0)   //doesn't start with '.'
      settings.css = "." + settings.css;
       
    var t = settings.t;
 
    //public methods
    this.lang = function(l) {
      if (l) {
      

        settings.lang = l;
        this.translate(settings);  //translate everything
      }
        
      return settings.lang;
    };


    this.get = function(index) {
      var res = index;

      try {
        res = t[index][settings.lang];
      }
      catch (err) {
        //not found, return index
        return index;
      }
      
      if (res)
        return res;
      else
        return index;
    };

    this.g = this.get;

    // for inputs. for any attributes. like in this example i am translating placeholder.
    // you can translate any tooltip or any other attribute
    for (var i = 0; i < $(".trn").get().length; i++) {
      if ($(".trn").get()[i].nodeName == "INPUT") {
        var thisNode = $($(".trn").get()[i]);
        var placeholderValue = thisNode.attr("placeholder");

        var trn_key = thisNode.attr("data-trn-key");
        if (!trn_key) {
          trn_key = placeholderValue;
          thisNode.attr("data-trn-key", trn_key);   //store key for next time
        }
        thisNode.attr("placeholder", t[trn_key][settings.lang]);

      }
          
    }    
    //main
    this.find(settings.css).each(function(i) {
      var $this = $(this);
      


      var trn_key = $this.attr("data-trn-key");
      if (!trn_key) {
        trn_key = $this.html();
        
              

        $this.attr("data-trn-key", trn_key);   //store key for next time
      }

      $this.html(that.get(trn_key));
    });
    
    
    return this;
  };
})(jQuery);



///WE USE THE FUNCTION HERE


var dict = {
"Task": {
ge: "Aufgabe"
  }
  
  }

var translator = $(document).translate({lang: "en", t: dict});
translator.lang("ge");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<span class="trn">Task</span><br>
<span class="trn">Task:</span><br>
<span class="trn">Task...</span>

if you run the above code, you'll see that the only text that gets translated is the first one (Task) which doesn't have any other characters or dots.

How can I ignore all the special characters and the dots etc and just translate the words?

I tried something like this which doesn't work:

trn_key = trn_key.replace(':', ' ');

@somethinghere it's pretty visible. Scroll the snippet in where OP passes the translation dictionary `dict`. — Roko C. Buljan, Jul 06 '23 at 09:40
Aaaahhhhh developer for 12 years and forgot to scroll. Was very confident here. Oops. — somethinghere, Jul 06 '23 at 09:42
Note the issue: this (and other code) `for (var i = 0; i < $(".trn").get().length; i++) {` uses `.trn` instead of `settings.css` — freedomn-m, Jul 06 '23 at 09:44
Also off topic: you should be using `.data("trn-key")` to read/write the data, not `.attri("data-` - will perform better. — freedomn-m, Jul 06 '23 at 09:46
Also your `translate` triggers twice which is pretty consuming. Once on init, and the other time when you do `translator.lang("ge")`. Do it immediately instead. — Roko C. Buljan, Jul 06 '23 at 09:52
`var thisNode = $($(".trn").get()[i]);` is really bad. Instead you could just `.each()` — Roko C. Buljan, Jul 06 '23 at 09:55

Albert Einstein · Accepted Answer · 2023-07-06T12:05:05.963

Use regex to replace special character with empty string and use that string to translate. Similarly, hold the special character if you need to be displayed along with translated word. In this case I have used

trn_key.replace(/[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '');

to replace special character taken from https://stackoverflow.com/a/11090301/5740382

Following is the working example:

(function($){
  $.fn.translate = function(options) {

    var that = this; //a reference to ourselves
  
    var settings = {
      css: "trn",
      lang: "en"/*,
      t: {
        "translate": {
          pt: "tradução",
          br: "tradução"
        }
      }*/
    };
    settings = $.extend(settings, options || {});
    if (settings.css.lastIndexOf(".", 0) !== 0)   //doesn't start with '.'
      settings.css = "." + settings.css;
       
    var t = settings.t;
 
    //public methods
    this.lang = function(l) {
      if (l) {
      

        settings.lang = l;
        this.translate(settings);  //translate everything
      }
        
      return settings.lang;
    };


    this.get = function(index) {
      var res = index;

      try {
        res = t[index][settings.lang];
      }
      catch (err) {
        //not found, return index
        return index;
      }
      
      if (res)
        return res;
      else
        return index;
    };

    this.g = this.get;

    // for inputs. for any attributes. like in this example i am translating placeholder.
    // you can translate any tooltip or any other attribute
    for (var i = 0; i < $(".trn").get().length; i++) {
      if ($(".trn").get()[i].nodeName == "INPUT") {
        var thisNode = $($(".trn").get()[i]);
        var placeholderValue = thisNode.attr("placeholder");

        var trn_key = thisNode.attr("data-trn-key");
        if (!trn_key) {
          trn_key = placeholderValue;
          thisNode.attr("data-trn-key", trn_key);   //store key for next time
        }
        thisNode.attr("placeholder", t[trn_key][settings.lang]);

      }
          
    }    
    //main
    this.find(settings.css).each(function(i) {
      var $this = $(this);
      


      var trn_key = $this.attr("data-trn-key");
      if (!trn_key) {
        trn_key = $this.html();
        $this.attr("data-trn-key", trn_key);   //store key for next time
      }

      let currentWord = trn_key.replace(/[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '');
      let currentSpecialCharacter = trn_key.replace(currentWord, '');
      $this.html(that.get(currentWord) + currentSpecialCharacter);

    });
    
    
    return this;
  };
})(jQuery);



///WE USE THE FUNCTION HERE


var dict = {
"Task": {
ge: "Aufgabe"
  }
  
  }

var translator = $(document).translate({lang: "en", t: dict});
translator.lang("ge");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<span class="trn">Task</span><br>
<span class="trn">Task:</span><br>
<span class="trn">Task...</span>

score 1 · Answer 2 · answered Jul 06 '23 at 09:46

You can remove them from the lookup key

Add the chars you want or reverse something like /^[\p{L}]+$/u

this.get = function(index) {
  var res = index;
  var clean = index.replace(/[\.:\?]/g,""); // added - 
  try {
    res = t[clean][settings.lang]; // changed
  }
  catch (err) {
    //not found, return index
    return index;
  }

  if (res)
    return index.split(clean).join(res); // changed
  else
    return index;
};

(function($){
  $.fn.translate = function(options) {

    var that = this; //a reference to ourselves
  
    var settings = {
      css: "trn",
      lang: "en"/*,
      t: {
        "translate": {
          pt: "tradução",
          br: "tradução"
        }
      }*/
    };
    settings = $.extend(settings, options || {});
    if (settings.css.lastIndexOf(".", 0) !== 0)   //doesn't start with '.'
      settings.css = "." + settings.css;
       
    var t = settings.t;
 
    //public methods
    this.lang = function(l) {
      if (l) {

        settings.lang = l;
        this.translate(settings);  //translate everything
      }
        
      return settings.lang;
    };


    this.get = function(index) {
      var res = index;
      var clean = index.replace(/[\.:\?]/g,"");
      try {
        res = t[clean][settings.lang];
      }
      catch (err) {
        //not found, return index
        return index;
      }

      if (res)
        return index.split(clean).join(res)
      else
        return index;
    };

    this.g = this.get;

    // for inputs. for any attributes. like in this example i am translating placeholder.
    // you can translate any tooltip or any other attribute
    for (var i = 0; i < $(".trn").get().length; i++) {
      if ($(".trn").get()[i].nodeName == "INPUT") {
        var thisNode = $($(".trn").get()[i]);
        var placeholderValue = thisNode.attr("placeholder");

        var trn_key = thisNode.attr("data-trn-key");
        if (!trn_key) {
          trn_key = placeholderValue;
          thisNode.attr("data-trn-key", trn_key);   //store key for next time
        }
        thisNode.attr("placeholder", t[trn_key][settings.lang]);

      }
          
    }    
    //main
    this.find(settings.css).each(function(i) {
      var $this = $(this);
      


      var trn_key = $this.attr("data-trn-key");
      if (!trn_key) {
        trn_key = $this.html();
        
              

        $this.attr("data-trn-key", trn_key);   //store key for next time
      }

      $this.html(that.get(trn_key));
    });
    
    
    return this;
  };
})(jQuery);



///WE USE THE FUNCTION HERE


var dict = {
"Task": {
ge: "Aufgabe"
  }
  
  }

var translator = $(document).translate({lang: "en", t: dict});
translator.lang("ge");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<span class="trn">Task</span><br>
<span class="trn">Task:</span><br>
<span class="trn">Task...</span>

how to use jQuery to convert html page content into another language and consider special characters?

2 Answers2