下面是一个解决方案，它使用一个翻译表和一些jQuery以及原生JavaScript来遍历DOM并更改文本，不包括标签属性。点击切换到美国拼写按钮：

const translations = {
  colour: 'color',
  colours: 'colors',
  Colour: 'Color',
  Colours: 'Colors',
  optimising: 'optimizing',
  specialise: 'specialize'
};
const regex = new RegExp('\\b(' + Object.keys(translations).join('|') + ')\\b', 'g');
console.log('regex', regex);
$(document).ready(function() {
  $('.switchSpelling button').click(function() {
    $('#mainContent *').contents().each(function() {
      if(this.nodeType == 3) {
        this.nodeValue = this.nodeValue.replace(regex, m => {
          return translations[m];
        });
      }
    });
  })
});

.switchSpelling {
  float: right;
  margin-right: 70px;
}
.grayBackgroundColour {
  background-color: #f0f0f0;
  padding: 3px 10px;
}
.yellowBackgroundColour {
  background-color: #fffff0;
  padding: 3px 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="mainContent">
<div class="switchSpelling">
<button>Switch to USA Spelling</button>
</div>
<h1>The history of Colour</h1>
<div class="grayBackgroundColour">
<h2>Colours in Renaissance</h2>
<p>We specialise in optimising and restoring colours</p>
</div>
<div class="yellowBackgroundColour">
<h2>Colours in Cubism</h2>
<p>We specialise in optimising and restoring colours</p>
</div>
</div>