查找并用javascript替换HTML文本

Question

使用WYSIWYG类型的网页创建器，该创建器链接到各种数据库以从客户端服务器提取信息。

一个变量用于频率，具有三个可能的输出，MO，YR或为空。

这是我在某处的HTML（可以多次出现，只需将下一个数字换成1）

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

我正在寻找使用javascript将MO或YR替换为/ month和/ year，并且在填充空白时不执行任何操作。

没有太多关于javascript的知识，所以不确定从哪里开始。 正在沿着这种思路思考事情，但不确定我是朝正确的方向前进还是从这里前进

 <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> 

任何能帮助我前进的东西都会很棒。 谢谢！

Answer 1

假设我正确地理解了您的要求，那么无论HTML文档中有多少“ rateFrequency”跨度，以下代码都可以解决问题。

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();
};

if不需要if则不需要。 如果跨度中包含的文本为“ MO”，则第一个replace将其替换为“ / month”，而第二个替换项将无效。 如果范围中包含的文本为“ YR”，则第一个replace将不执行任何操作，第二个replace将使用“ / year”替换。 如果跨度中的文本不是'MO'或'YR'以外的任何内容，则两个replace都不会做任何事情，并且跨度中的文本将保持不变。

Answer 2

我已经制作了Codepen供您查看。 它使用jquery，我建议您使用它，因为它很棒！

如果您有问题，请告诉我： 示例

$(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');
    }
  }) 
})