я есть простой вопрос JavaScript на странице HTML.

В моем случае пользователь может использовать мышь длявыделите какой-нибудь текст в параграфенапример, с помощью мыши выделите «Меня зовут Джон», а затем нажмите одну из кнопок ввода, затемвыделенный текст будет применен к выбранному стилю кнопки к тексту (например, добавьте цвет CSS и очистите цвет CSS).

Например, если я использую мышь, чтобы выделить «Меня зовут Джон», и нажимаю «красную» кнопку, текст «Меня зовут Джон» станет красным.

Существует 1 страница HTML и 1 файл JS.

У меня есть следующий код на странице 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>

Файл 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!!!!!!!
            }
}

И я ожидаю, что результат, как после выбора текста и выбора красной кнопки (если у меня есть класс CSS красный)

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

если пользователь выберет «Меня зовут Джон» и нажмет кнопку «Очистить», он вернется к

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

P.S По ряду причин я не хочу использовать для этого jQuery или какую-либо другую библиотеку, но можно дать ответ, чтобы использовать jQuery. Большое спасибо.