Find and Replace all instances of a word with jquery

Question

I have an article with many instances of the word "color". I set up a button with the class .colour so that if you want you can click it and change the spelling from "color" to "colour" throughout the page. I've written some jQuery to do this but it only changes one instance of the word color but not all. You'd have to keep repeatedly clicking the button to change all of them.

$(document).ready(function(){
    $(".colour").click(function(){
        $("body").children().each(function() {           
            $(this).html($(this).html().replace("color","colour"));
        });
    })
})

Is there a way to repeatedly loop the script until it changes all instances? Also is it possible to make it so it is not case-sensitive? I'm new to javascript and jquery so might be a noob question. Thanks

Here's a codepen of it: http://codepen.io/patrickaltair/pen/vcdmy

Answer 1

Have your replace use a regex with a global replace.

Change:

$(this).html().replace("color","colour")

to:

$(this).html().replace(/color/g,"colour");

codepen example