Using Replace only once

Question

I'm using the Wordpress Avada Theme and I'm trying to translate the social media privacy labels/contents using jQuery. So far it works fine but one thing does not.

Here is the HTML:

function translate() {
  jQuery(".fusion-privacy-label").text(function() {
    return jQuery(this).html().replace("For privacy reasons Google Maps needs your permission to be loaded. For more details, please see our ", "Here is some example translation text. For more Details, please visit");
  });
}
setTimeout(translate, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fusion-privacy-label">
  For privacy reasons Google Maps needs your permission to be loaded. For more details, please see our
  <a class="privacy-policy-link" href="https://example.com/privacy/">Privacy</a>.
</div>

That works so far but it also deletes the <a class="privacy-policy-link" href="https://example.com/privacy/">Privacy</a> HTML link. I don't want to translate this HTML link. If I try to add <a class="privacy-policy-link" href="https://example.com/privacy/">Privacy</a> within my translation, it shows as text and not as a HTML Link element.

What I want is just the Translation of the first text part, not the a-tag element or the text within the a-tag.

What did I wrong?

As you have html in your div, you should use `.html()`, not `.text()` — Pete, Sep 26 '18 at 10:04
@Pete has your answer. As a suggestion though, I'd not recommend performing translations on the client as you end up with a FOUC where you can see the original language first. Translations are much better done server side. — Rory McCrossan, Sep 26 '18 at 10:11

score 0 · Answer 1 · answered Sep 26 '18 at 10:03

Try following. Use jQuery.html instead of jQuery.text

function translate(){
  jQuery(".fusion-privacy-label").html(function () {
    return jQuery(this).html().replace("For privacy reasons Google Maps needs your permission to be loaded. For more details, please see our ", "Here is some example translation text. For more Details, please visit"); 
});
}
setTimeout(translate, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fusion-privacy-label">
For privacy reasons Google Maps needs your permission to be loaded. For more details, please see our 
<a class="privacy-policy-link" href="https://example.com/privacy/">Privacy</a>.
</div>

@Jai - Can you please explain the difference / deviation from the expected one? — Nikhil Aggarwal, Sep 26 '18 at 11:33

score 0 · Accepted Answer · answered Sep 26 '18 at 10:08

I would use .html instead of .text as you have html in your div:

function translate() {
  jQuery(".fusion-privacy-label").html(function(index, oldHtml) { // as you use the function, just use the arguments of the function instead of $(this).html()
    return oldHtml.replace("For privacy reasons Google Maps needs your permission to be loaded. For more details, please see our", "Here is some example translation text. For more Details, please visit"); // watch the spaces here - there is no space after our in your actual html
  });
}
setTimeout(translate, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fusion-privacy-label">
  For privacy reasons Google Maps needs your permission to be loaded. For more details, please see our
  <a class="privacy-policy-link" href="https://example.com/privacy/">Privacy</a>.
</div>

score 0 · Answer 3 · answered Sep 26 '18 at 12:13

Try this below code,

  <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
     <body>
        <div class="fusion-privacy-label">
             For privacy reasons Google Maps needs your permission to be loaded. For more details, please see our 
             <a class="privacy-policy-link" href="https://example.com/privacy/">Privacy</a>.
         </div>
         <script>
             $(document).ready(function() {
                 return $(".fusion-privacy-label").html().replace("For privacy 
                reasons Google Maps needs your permission to be loaded. For more 
                details, please see our ", "Here is some example translation text. 
                For more Details, please visit"); 
             });
          </script>
                   (or)
          <script>
             function translate(){
                 return $(".fusion-privacy-label").html().replace("For privacy 
                         reasons Google Maps needs your permission to be loaded. For 
                         more details, please see our ", "Here is some example 
                         translation text. For more Details, please visit"); 

              }
              setTimeout(translate, 1000);
          </script>
      </body>
  </html>

Using Replace only once

3 Answers3