Tengo una pregunta simple de JavaScript en la página HTML.

n mi caso, el usuario puede usar el mouse paraseleccione algún texto en el paragrahe, p.ej. use el mouse para resaltar 'Mi nombre es John', y luego haga clic en el botón de entrada, luego texto seleccionado se aplicará al estilo del botón seleccionado al texto (por ejemplo, agregue el color CSS y borre el color CSS).

Por ejemplo, si uso el mouse para resaltar 'Mi nombre es John' y hago clic en el botón 'rojo', el texto de 'Mi nombre es John' se volverá rojo.

Hay 1 página HTML y 1 archivo js.

Tengo el siguiente código en la 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>

El archivo 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!!!!!!!
            }
}

Y espero el resultado como después de seleccionar el texto y seleccionar el botón 'rojo' (suponiendo que la clase CSS sea roja)

// 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>

si el usuario selecciona 'Mi nombre es John' y hace clic en el botón 'borrar', volverá a

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

P.S Debido a algunas razones, no quiero usar jQuery o alguna otra biblioteca para hacerlo, pero es bienvenido dar la respuesta para usar jQuery. Muchas gracias