Untitled

<!DOCTYPE html>
<html>
<script>
function Highlight()
{
//alert(text.focusOffset - text.anchorOffset);

var text = window.getSelection();
var start = text.anchorOffset;
var color = document.getElementById("color").value;

var end = text.focusOffset - text.anchorOffset;

range = window.getSelection().getRangeAt(0);
range1 = window.getSelection().toString();
var selectionContents = range.extractContents();
var span = document.createElement("span");

span.appendChild(selectionContents);

span.setAttribute("class", "uiWebviewHighlight");
span.style.backgroundColor = color;
span.style.color = "black";

range.insertNode(span);
}

function bold(){
var text = window.getSelection();
var start = text.anchorOffset;
var end = text.focusOffset - text.anchorOffset;
range = window.getSelection().getRangeAt(0);
range1 = window.getSelection().toString();
var selectionContents = range.extractContents();

var bTag = document.createElement("b");

bTag.appendChild(selectionContents);

range.insertNode(bTag);
}

function underLine(){
var text = window.getSelection();
var start = text.anchorOffset;
var end = text.focusOffset - text.anchorOffset;
range = window.getSelection().getRangeAt(0);
range1 = window.getSelection().toString();
var selectionContents = range.extractContents();

var uL= document.createElement("u");

uL.appendChild(selectionContents);

range.insertNode(uL);
}

function display(){
var cont= document.getElementById("div1").innerHTML;
document.getElementById("div2").innerHTML=cont;
alert(cont);
}

</script>
<body>

Select your favorite color: <input id="color" type="color" name="favcolor" /><br />
<div contenteditable="true" id="div1">Edit the code above and click to see</div>
<div id="div2"></div>
<button id="btn" onClick="Highlight()">Get Color</button>
<button id="btn1" onClick="bold()">BOLD</button>
<button id="btn2" onClick="underLine()">UnderLine</button>
<button id="btn3" onClick="display()">Alert the div content</button>

</body>
</html>