G'day guys,

Given that I am (sort of) new to javascript I have the following code;


<script type="text/javascript">

[INDENT]function insertBold(tArea){

[INDENT]var unselectedText = tArea.value;

var selectedText = tArea.value.substr(tArea.selectionStart, tArea.selectionEnd);
var v = "[B]" + selectedText + "[/B]";

var temp_array = tArea.value.split(selectedText);
tArea.value = v;[/INDENT]

[INDENT]<textarea id="mytext" rows="8" cols="70"></textarea> 
<button onclick="insertBold(document.getElementById('mytext'))">BOLD</button> [/INDENT]

The code above, works as is intended. However, I cannot figure out how to use the split(); function in order to get the text before and after the 'selected' text and recombine it with the addition of the '' tags.

I've tried to use the following but to no success.

var txt_array = unselectedText.split(selectedText);
var part_num = 0;
var t = "";
while (part_num < txt_array.length) {
  if( part_num != 1 ) { // if not the selected text (expected length of 3 for array)
    t = t + txt_array[part_num];
    t = t + "B" + txt_array[part_num] + "/B";

You help is very much appreciated.


6 Years
Discussion Span
Last Post by haleel

As you may know split() returns array of strings. So you just need to split the tArea string with <selected> text which will return you an array of 2 strings: before and after strings of <selected> text.

Hope this will help:-

		function show(tArea) {
			var value = tArea.value;
			if(tArea.selectionStart && tArea.selectionEnd) {
				var start = tArea.selectionStart;
				var end = tArea.selectionEnd;
				var sel = value.substring(start, end);				
				alert("selected: " + sel);
				var splitArr = value.split(sel);
				alert("before: " + splitArr[0] + " after: " + splitArr[1]);
			} else {
				alert("No text selected");
		<textarea id="myText"></textarea>
		<button onclick="show(document.getElementById('myText'))">BOLD</button> 

This code will fail when there are more than one ocurance of <selected> text.


Please try this code

        function show() {
        var agt=navigator.userAgent.toLowerCase();
        // code for IE
        if (agt.indexOf("msie") != -1)
            alert("Using IE")
            var textarea = document.getElementById("myText");
            if (document.selection)
                var sel = document.selection.createRange();
                // alert the selected text in textarea
                // Finally replace the value of the selected text with this new replacement one
                sel.text = '<b>' + sel.text + '</b>';

        //code for mozilla
        else if(agt.indexOf("mozilla/5.0") != -1)
            alert("Using Mozilla")
            var textarea = document.getElementById("myText");
            var len = textarea.value.length;
            var start = textarea.selectionStart;
            var end = textarea.selectionEnd;
            var sel = textarea.value.substring(start, end);
            // This is the selected text and alert it
            var replace = '<b>' + sel + '<b>';
            // Here we are replacing the selected text with this one
            textarea.value =  textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);

Edited by Nick Evan: Fixed formatting

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.