How can the set Device Language change a heading?

Question

I have the word "Color" in a heading at the top of an html page. For users with a device set to British English, I want the text to change to "Colour". How can I achieve this? (with minimal Javascript if possible)

Answer 1

If you give your heading an ID so it looks something like this:

<h1 id="myColorHeading">Color</h1>

you can do it like this:

var el = document.getElementById('myColorHeading');
el.innerHTML = el.innerHTML.replace('Color', 'Colour');

Answer 2

Alex's answer is a start, but if you want to do this only on browsers that have en-GB for a default language, you will have to detect the language as follows:

if (navigator.language == 'en-GB') {
  var h1 = document.body.getElementsByTagName('h1');
  for (var i = 0; i < h1.length; ++i)
    h1[i].innerHTML = h1[i].innerHTML.replace('Color', 'Colour');
}

<h1>Color Chart</h1>