用 javascript 查找和替换 HTML 文本

Question

使用所见即所得类型的网页创建器链接到各种数据库以从客户端服务器中提取信息。

一个变量是频率，有三个可能的输出，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。如果跨度中包含的文本是 'MO'，第一个 replace 将用 '/month' 替换它，第二个替换不会做任何事情。如果 span 中包含的文本是 'YR'，则第一个 replace 不会做任何事情，第二个 replace 将用 '/year' 替换它。如果 span 中的文本不是“MO”或“YR”，replace 将不会做任何事情，并且 span 中的文本将保持不变。

Answer 2

我制作了codepen给你看看。它使用 jquery，我建议你使用它，因为它很棒！

如果您有任何问题，请告诉我： 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');
    }
  }) 
})