Javascript - highlight text in textbox?

<a href="javascript:;" onclick="document.forms[0].detail.value=document.forms[0].detail.value+'[b ][ /b]'">
Bold
</a>

<form id="form1" name="form1" method="post">
<textarea name="detail" cols="50" rows="5" id="detail"></textarea>
</form>

Code (markup):

Hey, could somebody help me out? I have the code above which when the link "Bold" is clicked the javascript inserts "[b ][ /b]" into the textbox. How could I edit the current code so that when the text in the textbox is highlighted/selected the [b ][ /b] goes around the selected text? ([b ]Text here[ /b])

Thanks for you help

 

Maybe like this:

<script>
function insert()
{
	var textarea = document.getElementById('detail');

	if(textarea.selectionStart != textarea.selectionEnd)
	{
		var tmp = (textarea.value).substring(textarea.selectionStart, textarea.selectionEnd);
	
		textarea.value = textarea.value.substring(0, textarea.selectionStart) + '[b ]' + tmp + '[ /b]' + textarea.value.substring(textarea.selectionEnd);
	}
}
</script>
<a href="javascript:;" onclick="insert();">
Bold
</a>

<form id="form1" name="form1" method="post">
<textarea name="detail" cols="50" rows="5" id="detail"></textarea>
</form>

Code (markup):

 

I tried several methods but in vain.

Anyone?

 

Thanks Kaimi, it works quite well
But it doesn't work when nothing is selected. I would like [b ][ /b] to be entered into the textbox even when nothing is selected.
Anyone have any ideas?
Surely there's a simple way of doing this?

 

Just remove
if(textarea.selectionStart != textarea.selectionEnd)

 

Thanks that works perfectly. Rep added