9 Replies Latest reply on Jul 15, 2014 1:53 AM by joel_pau

    Find and replace html text

    Xoco Level 3

      I need replace some text in several descendants elements of rXefsList div for to translate my website.

       

      I try with jQuery find() Method but this doesn't works for html text:

      sym.$("rXefsList").find("JULIOL").html("JULY");


      or

      sym.$("rXefsList").find("div").map( function(){

          if (this.html()=="JULIOL"){ this.html("JULY"); }});

       

      If I view source code, this is the content line:

      <div id="Stage_sb1309m" class="edgeLoad-EDGE-67786006">JULIOL</div>

       

      What method I need to use for this purpose?

       

      Thanks.

        • 1. Re: Find and replace html text
          Xoco Level 3

          Viewing the last example of .find() | jQuery API Documentation, I see that the correct syntax is:

          sym.$("rXefsList").find(":contains('JULIOL')")

           

          but only works if I change a css property

          sym.$("rXefsList").find(":contains('JULIOL')")

            .css({

             "font-style": "italic",

             "font-weight": "bolder"

            });

           

          not if I change text with jQuery html() Method or jQuery text() Method

          sym.$("rXefsList").find(":contains('JULIOL')").html("JULY");

          • 2. Re: Find and replace html text
            heathrowe Most Valuable Participant

            Try the replace method JavaScript String replace() Method

             

            sym.$("rXefsList").html(sym.$("rXefsList").html().replace('JULIOL', 'JULY'));

             

            hth

            Darrell

            • 3. Re: Find and replace html text
              Xoco Level 3

              Thanks, but I need change text of severals childs of rXefsList div, not html text of rXefsList directly, are elements (inserted with text tool) descendants of rXefsList.

               

              Like tv2007m div:

              edge.jpg

              • 4. Re: Find and replace html text
                heathrowe Most Valuable Participant

                Then you can utilize the same method on those elements, individually

                 

                sym.$("tv2007m").html(sym.$("tv2007m").html().replace('xxxx', 'yyyyy'));

                sym.$("tv2007d").html(sym.$("tv2007d").html().replace('wwww', 'zzzzz'));


                repeat the above for other elements.


                Darrell

                • 5. Re: Re: Find and replace html text
                  joel_pau Level 5

                  So, i go on.

                  You have to create a collection then browse it to change your word.

                  Here are 3 options:

                  Option 1 (for teaching proposes):

                  var myCollection = sym.$("Stage").find(':contains("oneWord")');

                  $.each(myCollection, function(){

                  $(this).html( $(this).html().replace("oneWord", "anotherWord") );

                  });

                   

                  Option 2 (for teaching purposes):

                  var myCollection = sym.$("Stage").find(':contains("oneWord")');

                  myCollection.each( function(){

                  $(this).html( $(this).html().replace("oneWord", "anotherWord") );

                  } );

                   

                  Option 3:

                  sym.$("Stage").find(':contains("oneWord")').each( function(){ $(this).html( $(this).html().replace("oneWord", "anotherWord") ); } );

                  • 6. Re: Find and replace html text
                    Xoco Level 3

                    If I send myCollection to console.log:

                    consola.jpg

                    Parents are included by innerHTML property, and if I try this:

                    $("div#Stage_tv2007m").html( $("div#Stage_tv2007m").html().replace("JULIOL", "JULY") );

                     

                    Works fine, but not work when I try

                    myCollection.each( function(){

                    $(this).html( $(this).html().replace("JULIOL", "JULY") );

                    } );

                     

                    Because I can not use "this" (only in this project) and I do not know why (nothing happens): Use of "this"


                    Example, in mouseenter event of a img, If I try:

                    this.css("bottom","+=2px");

                     

                    nothing happens, I must to use:

                    sym.$('facebook').css("bottom","+=2px");


                    I have reviewed that has no element or name variable with this name ("this"), but it is not.


                    PD: I have also looked HTML DOM textContent Property but nothing.


                    • 7. Re: Find and replace html text
                      joel_pau Level 5

                      Before writing my previous post (#5), i've tested. Here are pics: my code panel and my elements on stage.

                      codePanel.jpg

                      ElementsPanel.jpg

                       

                      I will add this demo file.

                      1 person found this helpful
                      • 8. Re: Find and replace html text
                        Xoco Level 3

                        Yes, your example work fine, but in a new project, with my current project I have problems using this. or $(this). method in code. I've open a discussion about it Re: Use of "this"

                         

                        Thank you for your correct answer.

                        • 9. Re: Find and replace html text
                          joel_pau Level 5

                          As it is an event, User Interface provides you : e.target.

                          eTarget.jpg

                          For instance: $(e.target). hide(); or sym.$(e.target).hide(). The current element (button) will be hidden.

                          console.log( e.type, e.target ) returns the event and the target.

                          console.log( e.target.id ) returns the id of the element targeted.

                          1 person found this helpful