String split issue

Question

tyson.crouch 6 Junior Poster

13 Years Ago

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

javascript

3 Contributors
2 Replies
77 Views
15 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by haleel

Luckychap 68 Posting Pro in Training

13 Years Ago

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.

Reply to this topic

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.

haleel 0 Newbie Poster · Answer 1 · 2011-03-22T19:21:22+00:00

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);
        }
    }