How to use the Javascript to add/remove the CSS/colour style to the html page?

Question

I have a simple javascript question in the HTML page.

In my case, the user can use the mouse to select some text in the paragrahe, e.g. use the mouse to highlight the 'My name is John', and then click the one of the input button, then the selected text will be applied to selected button style to the text (e.g. add the CSS colour and clear the CSS colour).

For example, if I use the mouse to highlight the 'My name is John', and click 'red' button, the text of 'My name is John' will become red.

There is 1 HTML page and 1 js file.

I have the following code in the HTML page:

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

The text.js file

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

And I expect the result like after select the text and select 'red' button (assum I have the CSS class is red)

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

if the user select the 'My name is John' and click the 'clear' button, it will return to

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

P.S Due to some reasons, I don't want to use the jQuery or some other library to do so, but it is welcome to give the answer to use the jQuery. Thank you very much.

Answer 1

This will do the trick to wrap the selected text with a <span> node. I think you will need to change the getSelection() method in order to make it work in IE, but it works in FF:

function colour(colour) {
  var selection= window.getSelection();
  if (selection.toString()!=="") {
    var range = selection.getRangeAt(0);
    var span = document.createElement("span");
    span.className = colour;
    span.innerHTML = range.toString();
    range.deleteContents();
    range.insertNode(span);
  }
}

EDIT: The other two functions:

function clear_colour() {
  var selection=  window.getSelection();
  if (selection.toString()!=="" && 
      selection.anchorNode.parentNode.nodeName==="SPAN") {
    selection.anchorNode.parentNode.className="";
 }
}

function clear_colour_all() {
  var selection= document.getElementById('content');
  var spans = selection.getElementsByTagName("span");
  for(var i=0;i<spans.length;i++){
  spans[i].className="";
  }
}

It have some weird behavior depending on how you select the text, but now you have something to work with ;)

Answer 2

You can use the following for selected text coloring (http://jsfiddle.net/7kh8s/):

*This is a very basic one I did, but selected color is working.

<script>
    function colour(colour) {

    getSelectionHTML(colour);

    }

    function getSelectionHTML(color)
     {
     if (document.selection && document.selection.createRange) return (document.selection.createRange()).htmlText;
     if (window.getSelection)
     {
     var sel = window.getSelection();
     var html = "";
     for (var i=0;i<sel.rangeCount;i++)
     {
     var d = document.createElement("span");
    d.style.color = color;
     var r = sel.getRangeAt(i);
     var parent_element = r.commonAncestorContainer;
     var prev_html = parent_element.innerHTML;
     r.surroundContents(d);
     html += d.innerHTML;
     parent_element.innerHTML = prev_html;
     }
     return html;
     }
     return null;
     }
    </script>


    <p>

        My name is John,
        I live in ABC and I have a car.
        I like to play TV game.

    </p>


            <p>
                <input type="button" onclick="colour('red')" value='red'/>
                <input type="button" onclick="colour('blue')" value='blue'/>
            </p>