javascript - 如何不替换已经被替换的单词

Question

这是我的代码:

<script>
    function TransposeDown() {
        $("body").html($("body").html().replace(/C/g, 'B'));
        $("body").html($("body").html().replace(/B/g, 'Bb'));
    }
</script>

<button onclick="TransposeDown();">Transpose Down</button>
<span class="hcrd">C</span>
<span class="hcrd">B</span>
<span class="hcrd">C</span>

问题是一旦button点击后，里面的文字全部是<span>标签更改为“Bb”。但我想要的是第一个和最后一个span的文本更改为“B”，第二个的文本仅更改为“Bb”。

我该怎么做？有什么办法可以让该函数只执行一次吗？如有任何帮助，我们将不胜感激。

Answer 1

由于您显然正在尝试转调音乐和弦，因此我会寻求使用 data-original 来存储原始音符的解决方案，并跟踪用户转调音符的次数。这样您就可以轻松地重置整个事情。

工作示例:https://jsfiddle.net/dannyjolie/b5ghxLoL/1/

更新:开箱即用，这不适用于任何 6th、7th、maj、min 等，但也可以存储为数据属性，并附加到输出中。

var notes = ["A", "Bb", "B", "C", "Db", "D", "Eb", "E", "F", "Gb", "G", "Ab"];

var transposed = 0;

function transpose() {
  var chords = document.querySelectorAll('.hcrd');
  var chord = '';
  for (var i = 0; i < chords.length; i++) {
    chord = chords[i].dataset['original'];
    chords[i].innerHTML = getNewChord(chord);
  }
}

function getNewChord(chord) {
  var origIndex = notes.indexOf(chord);
  if (origIndex === -1) {
    // Invalid chord
    return chord;
  }
  if (origIndex + transposed < 0) {
    return notes[notes.length + transposed + origIndex];
  }
  return notes[origIndex + transposed];
}

function transposeDown() {
  transposed -= 1;

  if(transposed === -12){
	transposed = 0;
  }
  transpose();
}

function reset() {
  transposed = 0;
  transpose();
}

document.querySelector('#transposedown').addEventListener('click', transposeDown, false);
document.querySelector('#reset').addEventListener('click', reset, false)

<span class="hcrd" data-original="C">C</span>
<span class="hcrd" data-original="B">B</span>
<span class="hcrd" data-original="C">C</span>
<span class="hcrd" data-original="G">G</span>
<span class="hcrd" data-original="E">E</span>

<button id="transposedown">Transpose down</button>
<button id="reset">Reset</button>