Tenho uma pergunta javascript simples na página HTM

No meu caso, o usuário pode usar o mouse paraselecione algum texto no paragrahe, por exemplo. use o mouse para destacar 'Meu nome é João' e, em seguida, clique no botão de entrada e, em seguida, no texto selecionado será aplicado ao estilo do botão selecionado no texto (por exemplo, adicione a cor CSS e limpe a cor CSS

Por exemplo, se eu usar o mouse para destacar o 'Meu nome é João' e clicar no botão 'vermelho', o texto de 'Meu nome é João' ficará vermelho.

Existe uma página HTML e um arquivo j

Tenho o seguinte código na página HTML:

// text.html
// 3 input buttons with red, yellow and green colour
// 1 input button to clear the selected CSS colour
// 1 input button to clear all the selected CSS colour
<p>
<input type="button" onclick="colour('red')" value='red'/>
<input type="button" onclick="colour('yellow')" value='yellow'/>
<input type="button" onclick="colour('green')" value='green'/>
<input type="button" onclick="clear_colour()" value='Glear'/>
<input type="button" onclick="clear_colour_all()" value='Clear All'/>
</p>

// paragrahe
<p>
My name is John, 
I live in ABC and I have a car. 
I like to play TV game.
<p>

O arquivo text.js

//text.js
function colour(colour) {
var selection= window.getSelection().getRangeAt(0);
        var selectedText = selection.extractContents();
        if (selectedText != '') {
                        // I don't know how to do in here!!!!!!!
        }
}

function clear_colour() {
    var selection= window.getSelection().getRangeAt(0);
            var selectedText = selection.extractContents();
            if (selectedText != '') {
                            // I don't know how to do in here!!!!!!!
                            // I just find the following code
                            // var selection= window.getSelection().getRangeAt(0);
                //var selectedText = selection.extractContents();
            }
}

function clear_colour_all() {
    var selection= window.getSelection().getRangeAt(0);
            var selectedText = selection.extractContents();
            if (selectedText != '') {
                            // I don't know how to do in here!!!!!!!
            }
}

E espero o resultado como após selecionar o texto e selecionar o botão 'vermelho' (suponha que a classe CSS seja vermelha)

// paragrahe
<p>
<span class="red">My name is John, </span>
I live in ABC and I have a car. 
I like to play TV game.
<p>

se o usuário selecionar 'Meu nome é João' e clicar no botão 'limpar', ele retornará para

// paragrahe
<p>
My name is John,
I live in ABC and I have a car. 
I like to play TV game.
<p>

P.S Devido a alguns motivos, não quero usar o jQuery ou alguma outra biblioteca para fazê-lo, mas é possível fornecer a resposta para usar o jQuery. Muito obrigado