Member Avatar for tyson.crouch

G'day guys,

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

<html>
<head></head>

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

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

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];
  }else{
    t = t + "B" + txt_array[part_num] + "/B";
    part_num+=1;
  }
}

You help is very much appreciated.

Cheers

  • 3 Contributors
  • 2 Replies
  • 77 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by haleel

Recommended Answers

All 2 Replies

Member Avatar for Luckychap

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

<html>
	<script>
		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");
			}
		}
	</script>
	
	<body>
		<textarea id="myText"></textarea>
		<button onclick="show(document.getElementById('myText'))">BOLD</button> 
	</body>
</html>

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

Member Avatar for haleel

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)
            {
                textarea.focus();
                var sel = document.selection.createRange();
                // alert the selected text in textarea
                alert(sel.text);
                // 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
            alert(sel);
            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 because: Fixed formatting
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.