Find and replace HTML text with javascript

Question

Using a WYSIWYG type web page creator that links up to various databases to pull in information from the clients servers.

One variable is for frequency and has three possible outputs, MO, YR or it is blank.

This is my HTML for one place (this can appear multiple times, just switching out the 1 with the next number)

<span style="font-size:24px;"><strong>$@@1_Price</strong></span><span style="font-size:18px;" class="rateFrequency">@@1_rateFrequency</span>

I am looking to use javascript to replace the MO or YR with /month and /year and doing nothing when it fills in blank.

Not much knowledge in javascript, so not sure where to begin. Was thinking somthing along the lines of this, but not sure if I am going in the right direction or where to move forward from here

<script>
  window.onload=function change() {
      var frequency = document.getElementsByClassName("rateFrequency");
      if (condition1) {
          block of code to be executed if condition1 is true
      } else if (condition2) {
          block of code to be executed if the condition1 is false and condition2 is true
      } else {
          block of code to be executed if the condition1 is false and condition2 is false
      }
  }
change();
</script>

Anything to help me move forward would be great. Thanks!

tex · Accepted Answer · 2016-06-08 17:41:14Z

2

Assuming I have understood your requirements correctly, the following code should do the trick, no matter how many "rateFrequency" spans are in the HTML document.

window.onload = function(e) {

  function changeFreq() {
    var els = document.getElementsByClassName("rateFrequency"),
    len = els.length;
    while (len--){
      els.item(len).innerText = els.item(len).innerText.replace('MO', '/month').replace('YR', '/year');
    }
  }

  changeFreq();
};

No if is required here. If the text contained in the span is 'MO', the first replace will replace it with '/month' and the second replace won't do anything. If the text contained in the span is 'YR', the first replace won't do anything, and the second replace will replace it with '/year'. If the text in the span is anything other than 'MO' or 'YR', neither replace will do anything, and the text in the span will remain unchanged.

edited Jun 8, 2016 at 17:41

answered Jun 8, 2016 at 17:00

tex

2,7661 gold badge22 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kyle Pastor Over a year ago

I think he has an unknown set of spans. So the solution is good, but you would have to loop.

tex Over a year ago

Thanks, you're correct. I missed that in the question when I first read it. Will adjust the code now.

JSturgessMeyers Over a year ago

Is there anything else I need to get this to function? I tried pasting it into my script section as is with no luck, and I also iput it in with window.onload and no luck. Edit: nevermind, added it to the bottom of the page rather than the top and is working now. Thanks a ton!

tex Over a year ago

I'll update it so that it's called on window.onload()

Kyle Pastor · Accepted Answer · 2016-06-08 17:01:12Z

-1

I have made codepen for you to take a look at. It uses jquery, which I suggest you use because it is awesome!

Let me know if you have question: Example

$(document).ready(function(){
 $.each($('.rateFrequency'),function(){
    frq = $(this).text();
    if (frq=='MO'){
     console.log('REPLACE MONTH');
     $(this).text('/month');
    }else if(frq=='YR'){
     console.log('REPLACE YEAR');
      $(this).text('/year');
    }
  }) 
})

answered Jun 8, 2016 at 17:01

Kyle Pastor

5495 silver badges11 bronze badges

3 Comments

tex Over a year ago

Downvote reason: The original question asks for a solution in javascript, and you've provided a solution that depends on jQuery.

Kyle Pastor Over a year ago

Fair enough. I did so because he said he was very new to javascript, so I thought it would be OK to show him what was out there. I accept the downvote. (Also thanks for specifying the reason).

JSturgessMeyers Over a year ago

I appreciate the jquery response, and were I not using a WYSIWYG platform, I would be all for it. But it is easier to add straight javascript in this work environment.

Collectives™ on Stack Overflow

Find and replace HTML text with javascript

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related