如何使用jQuery将HTML页面内容转换为另一种语言并考虑特殊字符？

huangapple
go评论98阅读模式
英文:

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

问题

以下是您要翻译的内容的中文翻译部分：

我有一个 jQuery 代码，用于转换/翻译页面内容。

这个功能很好，但是我的页面上有一些文本包含特殊字符或额外的句点。

这会导致我的代码出现问题，翻译失败。

以下是完整的代码：

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  4. (function($){
  5.   $.fn.translate = function(options) {
  7.     var that = this; //a reference to ourselves
  9.     var settings = {
  10.       css: "trn",
  11.       lang: "en"/*,
  12.       t: {
  13.         "translate": {
  14.           pt: "tradução",
  15.           br: "tradução"
  16.         }
  17.       }*/
  18.     };
  19.     settings = $.extend(settings, options || {});
  20.     if (settings.css.lastIndexOf(".", 0) !== 0)   //doesn't start with '.'
  21.       settings.css = "." + settings.css;
  23.     var t = settings.t;
  25.     //public methods
  26.     this.lang = function(l) {
  27.       if (l) {
  30.         settings.lang = l;
  31.         this.translate(settings);  //translate everything
  32.       }
  34.       return settings.lang;
  35.     };
  38.     this.get = function(index) {
  39.       var res = index;
  41.       try {
  42.         res = t[index][settings.lang];
  43.       }
  44.       catch (err) {
  45.         //not found, return index
  46.         return index;
  47.       }
  49.       if (res)
  50.         return res;
  51.       else
  52.         return index;
  53.     };
  55.     this.g = this.get;
  57.     // for inputs. for any attributes. like in this example i am translating placeholder.
  58.     // you can translate any tooltip or any other attribute
  59.     for (var i = 0; i < $(".trn").get().length; i++) {
  60.       if ($(".trn").get()[i].nodeName == "INPUT") {
  61.         var thisNode = $($(".trn").get()[i]);
  62.         var placeholderValue = thisNode.attr("placeholder");
  64.         var trn_key = thisNode.attr("data-trn-key");
  65.         if (!trn_key) {
  66.           trn_key = placeholderValue;
  67.           thisNode.attr("data-trn-key", trn_key);   //store key for next time
  68.         }
  69.         thisNode.attr("placeholder", t[trn_key][settings.lang]);
  71.       }
  73.     }    
  74.     //main
  75.     this.find(settings.css).each(function(i) {
  76.       var $this = $(this);
  78.       var trn_key = $this.attr("data-trn-key");
  79.       if (!trn_key) {
  80.         trn_key = $this.html();
  83.         $this.attr("data-trn-key", trn_key);   //store key for next time
  84.       }
  86.       $this.html(that.get(trn_key));
  87.     });
  90.     return this;
  91.   };
  92. })(jQuery);
  95. ///WE USE THE FUNCTION HERE
  98. var dict = {
  99. "Task": {
  100. ge: "Aufgabe"
  101.   }
  103.   }
  105. var translator = $(document).translate({lang: "en", t: dict});
  106. translator.lang("ge");
  108. <!-- language: lang-html -->
  109. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  110. <span class="trn">Task</span><br>
  111. <span class="trn">Task:</span><br>
  112. <span class="trn">Task...</span>
  114. <!-- end snippet -->

如果您运行上面的代码，您会看到只有第一个文本（"Task"）被翻译，因为它不包含其他字符或句点。

您如何忽略所有特殊字符和句点等，只翻译单词？

我尝试了类似于这样的方法，但它不起作用：

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

希望这对您有所帮助。

英文:

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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. (function($){
  2. $.fn.translate = function(options) {
  3. var that = this; //a reference to ourselves
  4. var settings = {
  5. css: &quot;trn&quot;,
  6. lang: &quot;en&quot;/*,
  7. t: {
  8. &quot;translate&quot;: {
  9. pt: &quot;tradu&#231;&#227;o&quot;,
  10. br: &quot;tradu&#231;&#227;o&quot;
  11. }
  12. }*/
  13. };
  14. settings = $.extend(settings, options || {});
  15. if (settings.css.lastIndexOf(&quot;.&quot;, 0) !== 0)   //doesn&#39;t start with &#39;.&#39;
  16. settings.css = &quot;.&quot; + settings.css;
  17. var t = settings.t;
  18. //public methods
  19. this.lang = function(l) {
  20. if (l) {
  21. settings.lang = l;
  22. this.translate(settings);  //translate everything
  23. }
  24. return settings.lang;
  25. };
  26. this.get = function(index) {
  27. var res = index;
  28. try {
  29. res = t[index][settings.lang];
  30. }
  31. catch (err) {
  32. //not found, return index
  33. return index;
  34. }
  35. if (res)
  36. return res;
  37. else
  38. return index;
  39. };
  40. this.g = this.get;
  41. // for inputs. for any attributes. like in this example i am translating placeholder.
  42. // you can translate any tooltip or any other attribute
  43. for (var i = 0; i &lt; $(&quot;.trn&quot;).get().length; i++) {
  44. if ($(&quot;.trn&quot;).get()[i].nodeName == &quot;INPUT&quot;) {
  45. var thisNode = $($(&quot;.trn&quot;).get()[i]);
  46. var placeholderValue = thisNode.attr(&quot;placeholder&quot;);
  47. var trn_key = thisNode.attr(&quot;data-trn-key&quot;);
  48. if (!trn_key) {
  49. trn_key = placeholderValue;
  50. thisNode.attr(&quot;data-trn-key&quot;, trn_key);   //store key for next time
  51. }
  52. thisNode.attr(&quot;placeholder&quot;, t[trn_key][settings.lang]);
  53. }
  54. }    
  55. //main
  56. this.find(settings.css).each(function(i) {
  57. var $this = $(this);
  58. var trn_key = $this.attr(&quot;data-trn-key&quot;);
  59. if (!trn_key) {
  60. trn_key = $this.html();
  61. $this.attr(&quot;data-trn-key&quot;, trn_key);   //store key for next time
  62. }
  63. $this.html(that.get(trn_key));
  64. });
  65. return this;
  66. };
  67. })(jQuery);
  68. ///WE USE THE FUNCTION HERE
  69. var dict = {
  70. &quot;Task&quot;: {
  71. ge: &quot;Aufgabe&quot;
  72. }
  73. }
  74. var translator = $(document).translate({lang: &quot;en&quot;, t: dict});
  75. translator.lang(&quot;ge&quot;);

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;span class=&quot;trn&quot;&gt;Task&lt;/span&gt;&lt;br&gt;
  3. &lt;span class=&quot;trn&quot;&gt;Task:&lt;/span&gt;&lt;br&gt;
  4. &lt;span class=&quot;trn&quot;&gt;Task...&lt;/span&gt;

<!-- end snippet -->

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:

  1. trn_key = trn_key.replace(&#39;:&#39;, &#39; &#39;);

答案1

得分: 1

使用正则表达式将特殊字符替换为空字符串，并使用该字符串进行翻译。如果需要将特殊字符与翻译后的单词一起显示，可以保留特殊字符。在这种情况下，我使用以下代码来替换来自https://stackoverflow.com/a/11090301/5740382的特殊字符：

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

以下是工作示例：

  1. (function($){
  2.   $.fn.translate = function(options) {
  4.     var that = this; //a reference to ourselves
  5.   
  6.     var settings = {
  7.       css: "trn",
  8.       lang: "en"/*,
  9.       t: {
  10.         "translate": {
  11.           pt: "tradução",
  12.           br: "tradução"
  13.         }
  14.       }*/
  15.     };
  16.     settings = $.extend(settings, options || {});
  17.     if (settings.css.lastIndexOf(".", 0) !== 0)   //doesn't start with '.'
  18.       settings.css = "." + settings.css;
  19.        
  20.     var t = settings.t;
  21.  
  22.     //public methods
  23.     this.lang = function(l) {
  24.       if (l) {
  25.       
  27.         settings.lang = l;
  28.         this.translate(settings);  //translate everything
  29.       }
  30.         
  31.       return settings.lang;
  32.     };
  35.     this.get = function(index) {
  36.       var res = index;
  38.       try {
  39.         res = t[index][settings.lang];
  40.       }
  41.       catch (err) {
  42.         //not found, return index
  43.         return index;
  44.       }
  45.       
  46.       if (res)
  47.         return res;
  48.       else
  49.         return index;
  50.     };
  52.     this.g = this.get;
  54.     // for inputs. for any attributes. like in this example i am translating placeholder.
  55.     // you can translate any tooltip or any other attribute
  56.     for (var i = 0; i < $(".trn").get().length; i++) {
  57.       if ($(".trn").get()[i].nodeName == "INPUT") {
  58.         var thisNode = $($(".trn").get()[i]);
  59.         var placeholderValue = thisNode.attr("placeholder");
  61.         var trn_key = thisNode.attr("data-trn-key");
  62.         if (!trn_key) {
  63.           trn_key = placeholderValue;
  64.           thisNode.attr("data-trn-key", trn_key);   //store key for next time
  65.         }
  66.         thisNode.attr("placeholder", t[trn_key][settings.lang]);
  68.       }
  69.           
  70.     }    
  71.     //main
  72.     this.find(settings.css).each(function(i) {
  73.       var $this = $(this);
  74.       
  77.       var trn_key = $this.attr("data-trn-key");
  78.       if (!trn_key) {
  79.         trn_key = $this.html();
  80.         $this.attr("data-trn-key", trn_key);   //store key for next time
  81.       }
  83.       let currentWord = trn_key.replace(/[`~!@#$%^&*()_|+\-=?;:'",.<>{}[\]\\\/]/gi, '');
  84.       let currentSpecialCharacter = trn_key.replace(currentWord, '');
  85.       $this.html(that.get(currentWord) + currentSpecialCharacter);
  87.     });
  88.     
  89.     
  90.     return this;
  91.   };
  92. })(jQuery);
  96. ///WE USE THE FUNCTION HERE
  99. var dict = {
  100. "Task": {
  101. ge: "Aufgabe"
  102.   }
  103.   
  104.   }
  106. var translator = $(document).translate({lang: "en", t: dict});
  107. translator.lang("ge");
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  2. <span class="trn">Task</span><br>
  3. <span class="trn">Task:</span><br>
  4. <span class="trn">Task...</span>
英文:

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

  1. trn_key.replace(/[`~!@#$%^&amp;*()_|+\-=?;:&#39;&quot;,.&lt;&gt;\{\}\[\]\\\/]/gi, &#39;&#39;);

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

Following is the working example:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. (function($){
  2. $.fn.translate = function(options) {
  3. var that = this; //a reference to ourselves
  4. var settings = {
  5. css: &quot;trn&quot;,
  6. lang: &quot;en&quot;/*,
  7. t: {
  8. &quot;translate&quot;: {
  9. pt: &quot;tradu&#231;&#227;o&quot;,
  10. br: &quot;tradu&#231;&#227;o&quot;
  11. }
  12. }*/
  13. };
  14. settings = $.extend(settings, options || {});
  15. if (settings.css.lastIndexOf(&quot;.&quot;, 0) !== 0)   //doesn&#39;t start with &#39;.&#39;
  16. settings.css = &quot;.&quot; + settings.css;
  17. var t = settings.t;
  18. //public methods
  19. this.lang = function(l) {
  20. if (l) {
  21. settings.lang = l;
  22. this.translate(settings);  //translate everything
  23. }
  24. return settings.lang;
  25. };
  26. this.get = function(index) {
  27. var res = index;
  28. try {
  29. res = t[index][settings.lang];
  30. }
  31. catch (err) {
  32. //not found, return index
  33. return index;
  34. }
  35. if (res)
  36. return res;
  37. else
  38. return index;
  39. };
  40. this.g = this.get;
  41. // for inputs. for any attributes. like in this example i am translating placeholder.
  42. // you can translate any tooltip or any other attribute
  43. for (var i = 0; i &lt; $(&quot;.trn&quot;).get().length; i++) {
  44. if ($(&quot;.trn&quot;).get()[i].nodeName == &quot;INPUT&quot;) {
  45. var thisNode = $($(&quot;.trn&quot;).get()[i]);
  46. var placeholderValue = thisNode.attr(&quot;placeholder&quot;);
  47. var trn_key = thisNode.attr(&quot;data-trn-key&quot;);
  48. if (!trn_key) {
  49. trn_key = placeholderValue;
  50. thisNode.attr(&quot;data-trn-key&quot;, trn_key);   //store key for next time
  51. }
  52. thisNode.attr(&quot;placeholder&quot;, t[trn_key][settings.lang]);
  53. }
  54. }    
  55. //main
  56. this.find(settings.css).each(function(i) {
  57. var $this = $(this);
  58. var trn_key = $this.attr(&quot;data-trn-key&quot;);
  59. if (!trn_key) {
  60. trn_key = $this.html();
  61. $this.attr(&quot;data-trn-key&quot;, trn_key);   //store key for next time
  62. }
  63. let currentWord = trn_key.replace(/[`~!@#$%^&amp;*()_|+\-=?;:&#39;&quot;,.&lt;&gt;\{\}\[\]\\\/]/gi, &#39;&#39;);
  64. let currentSpecialCharacter = trn_key.replace(currentWord, &#39;&#39;);
  65. $this.html(that.get(currentWord) + currentSpecialCharacter);
  66. });
  67. return this;
  68. };
  69. })(jQuery);
  70. ///WE USE THE FUNCTION HERE
  71. var dict = {
  72. &quot;Task&quot;: {
  73. ge: &quot;Aufgabe&quot;
  74. }
  75. }
  76. var translator = $(document).translate({lang: &quot;en&quot;, t: dict});
  77. translator.lang(&quot;ge&quot;);

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;span class=&quot;trn&quot;&gt;Task&lt;/span&gt;&lt;br&gt;
  3. &lt;span class=&quot;trn&quot;&gt;Task:&lt;/span&gt;&lt;br&gt;
  4. &lt;span class=&quot;trn&quot;&gt;Task...&lt;/span&gt;

<!-- end snippet -->

答案2

得分: 1

以下是翻译的内容：

  1. You can remove them from the lookup key

    • 你可以从查找键中移除它们

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

    • 添加你想要的字符或反转类似 /^[\p{L}]+$/u 的内容

  3. this.get = function(index) {

    • this.get = function(index) {

  4. var res = index;

    • var res = index;

  5. var clean = index.replace(/[.:?]/g, "");

    • var clean = index.replace(/[.:?]/g, "");

  6. res = t[clean][settings.lang];

    • res = t[clean][settings.lang];

  7. //not found, return index

    • //未找到，返回索引

  8. if (res)

    • if (res)

  9. return index.split(clean).join(res);

    • return index.split(clean).join(res);

  10. else

    • else

  11. return index;

    • return index;

  12. (function($){

    • (function($){

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

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

  14. var that = this; //a reference to ourselves

    • var that = this; //对自身的引用

  15. var settings = {

    • var settings = {

  16. css: "trn",

    • css: "trn",

  17. lang: "en"/*,

    • lang: "en"/*,

  18. t: {

    • t: {

  19. "translate": {

    • "translate": {

  20. pt: "tradução",

    • pt: "tradução",

  21. br: "tradução"

    • br: "tradução"

  22. }

    • }

  23. }

    • }

  24. settings = $.extend(settings, options || {});

    • settings = $.extend(settings, options || {});

  25. if (settings.css.lastIndexOf(".", 0) !== 0) //doesn't start with '.'

    • if (settings.css.lastIndexOf(".", 0) !== 0) //不以'.'开头

  26. settings.css = "." + settings.css;

    • settings.css = "." + settings.css;

  27. var t = settings.t;

    • var t = settings.t;

  28. this.lang = function(l) {

    • this.lang = function(l) {

  29. if (l) {

    • if (l) {

  30. settings.lang = l;

    • settings.lang = l;

  31. this.translate(settings); //translate everything

    • this.translate(settings); //翻译所有内容

  32. }

    • }

  33. return settings.lang;

    • return settings.lang;

  34. }

    • }

  35. this.get = function(index) {

    • this.get = function(index) {

  36. var res = index;

    • var res = index;

  37. var clean = index.replace(/[.:?]/g,"");

    • var clean = index.replace(/[.:?]/g,"");

  38. //not found, return index

    • //未找到，返回索引

  39. return index;

    • return index;

  40. }

    • }

  41. this.g = this.get;

    • this.g = this.get;

  42. for (var i = 0; i < $(".trn").get().length; i++) {

    • for (var i = 0; i < $(".trn").get().length; i++) {

  43. if ($(".trn").get()[i].nodeName == "INPUT") {

    • if ($(".trn").get()[i].nodeName == "INPUT") {

  44. var thisNode = $($(".trn").get()[i]);

    • var thisNode = $($(".trn").get()[i]);

  45. var placeholderValue = thisNode.attr("placeholder");

    • var placeholderValue = thisNode.attr("placeholder");

  46. var trn_key = thisNode.attr("data-trn-key");

    • var trn_key = thisNode.attr("data-trn-key");

  47. thisNode.attr("data-trn-key", trn_key); //store key for next time

    • thisNode.attr("data-trn-key", trn_key); //存储键以供下次使用

  48. thisNode.attr("placeholder", t[trn_key][settings.lang]);

    • thisNode.attr("placeholder", t[trn_key][settings.lang]);

  49. }

    • }

  50. }

    • }

  51. this.find(settings.css).each(function(i) {

    • this.find(settings.css).each(function(i) {

  52. var $this = $(this);

    • var $this = $(this);

  53. $this.html(that.get(trn_key));

    • $this.html(that.get(trn_key));

  54. });

    • });

  55. return this;

    • return this;

  56. };

    • };

  57. })(jQuery);

    • })(jQuery);

  58. ///WE USE THE FUNCTION HERE

    • ///在这里使用该函数

  59. var dict = {

    • var dict = {

  60. "Task": {

    • "Task": {

  61. ge: "Aufgabe"

    • ge: "Aufgabe"

  62. }

    • }

  63. }

    • }

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

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

  65. translator.lang("ge");

    • translator.lang("ge");

  67. Task

    • Task

  68. Task:

    • Task:

  69. Task...

    • Task...
英文:

You can remove them from the lookup key

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

  1. this.get = function(index) {
  2. var res = index;
  3. var clean = index.replace(/[\.:\?]/g,&quot;&quot;); // added - 
  4. try {
  5. res = t[clean][settings.lang]; // changed
  6. }
  7. catch (err) {
  8. //not found, return index
  9. return index;
  10. }
  11. if (res)
  12. return index.split(clean).join(res); // changed
  13. else
  14. return index;
  15. };

<!-- begin snippet: js hide: trueconsole: true babel: false -->

<!-- language: lang-js -->

  1. (function($){
  2. $.fn.translate = function(options) {
  3. var that = this; //a reference to ourselves
  4. var settings = {
  5. css: &quot;trn&quot;,
  6. lang: &quot;en&quot;/*,
  7. t: {
  8. &quot;translate&quot;: {
  9. pt: &quot;tradu&#231;&#227;o&quot;,
  10. br: &quot;tradu&#231;&#227;o&quot;
  11. }
  12. }*/
  13. };
  14. settings = $.extend(settings, options || {});
  15. if (settings.css.lastIndexOf(&quot;.&quot;, 0) !== 0)   //doesn&#39;t start with &#39;.&#39;
  16. settings.css = &quot;.&quot; + settings.css;
  17. var t = settings.t;
  18. //public methods
  19. this.lang = function(l) {
  20. if (l) {
  21. settings.lang = l;
  22. this.translate(settings);  //translate everything
  23. }
  24. return settings.lang;
  25. };
  26. this.get = function(index) {
  27. var res = index;
  28. var clean = index.replace(/[\.:\?]/g,&quot;&quot;);
  29. try {
  30. res = t[clean][settings.lang];
  31. }
  32. catch (err) {
  33. //not found, return index
  34. return index;
  35. }
  36. if (res)
  37. return index.split(clean).join(res)
  38. else
  39. return index;
  40. };
  41. this.g = this.get;
  42. // for inputs. for any attributes. like in this example i am translating placeholder.
  43. // you can translate any tooltip or any other attribute
  44. for (var i = 0; i &lt; $(&quot;.trn&quot;).get().length; i++) {
  45. if ($(&quot;.trn&quot;).get()[i].nodeName == &quot;INPUT&quot;) {
  46. var thisNode = $($(&quot;.trn&quot;).get()[i]);
  47. var placeholderValue = thisNode.attr(&quot;placeholder&quot;);
  48. var trn_key = thisNode.attr(&quot;data-trn-key&quot;);
  49. if (!trn_key) {
  50. trn_key = placeholderValue;
  51. thisNode.attr(&quot;data-trn-key&quot;, trn_key);   //store key for next time
  52. }
  53. thisNode.attr(&quot;placeholder&quot;, t[trn_key][settings.lang]);
  54. }
  55. }    
  56. //main
  57. this.find(settings.css).each(function(i) {
  58. var $this = $(this);
  59. var trn_key = $this.attr(&quot;data-trn-key&quot;);
  60. if (!trn_key) {
  61. trn_key = $this.html();
  62. $this.attr(&quot;data-trn-key&quot;, trn_key);   //store key for next time
  63. }
  64. $this.html(that.get(trn_key));
  65. });
  66. return this;
  67. };
  68. })(jQuery);
  69. ///WE USE THE FUNCTION HERE
  70. var dict = {
  71. &quot;Task&quot;: {
  72. ge: &quot;Aufgabe&quot;
  73. }
  74. }
  75. var translator = $(document).translate({lang: &quot;en&quot;, t: dict});
  76. translator.lang(&quot;ge&quot;);

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;span class=&quot;trn&quot;&gt;Task&lt;/span&gt;&lt;br&gt;
  3. &lt;span class=&quot;trn&quot;&gt;Task:&lt;/span&gt;&lt;br&gt;
  4. &lt;span class=&quot;trn&quot;&gt;Task...&lt;/span&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月6日 17:24:44
  • 转载请务必保留本文链接：https://go.coder-hub.com/76627357.html
  • html
  • javascript
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定