Member Avatar for Acute

Hi,
What i want is:
I have a textarea. When user selects some text and presses a button "[smth]" is added to the begin and end of selected text. How can i do this? It must work on all browsers.
The same thing makes daniweb when you format a text (post).

  • 3 Contributors
  • 3 Replies
  • 293 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by Acute
Member Avatar for Chokladkakan 
<html>
<head>
	<script type="text/javascript">
    function formatText(el, tagstart, tagend){  	
		if (el.setSelectionRange) {
			el.value = el.value.substring(0,el.selectionStart) + tagstart + el.value.substring(el.selectionStart,el.selectionEnd) + tagend + el.value.substring(el.selectionEnd,el.value.length)
		}else{
			var selectedText = document.selection.createRange().text; 
	         
			if (selectedText != "") { 
				var newText = tagstart + selectedText + tagend; 
				document.selection.createRange().text = newText; 
			}
		}		
    } 
	</script>
</head>
<body>
	<textarea id="textarea"></textarea>
	<button onclick="formatText(document.getElementById('textarea'),'[smth]','[/smth]')">SMTH</button>
</body>
</html>

I'm afraid I can't check if this works in every browser, but I know at least the first conditional works for Firefox, Safari and Chrome. The latter is meant to support IE, but I have no access to the browser right now so I cannot try.

Edited by Chokladkakan because: n/a
Member Avatar for gumape

It is a similar example to the previous one created by Chokladkakan and it works in all commonly used browsers (Internet Explorer, Firefox, Chrome, Safari, Opera).

<head>
	<script language="JavaScript">
		function AddSMTH () {
			var textarea = document.getElementById("test");
			if (textarea.selectionStart === undefined) {	// Internet Explorer
					// create a range from the current selection
				var textRange = document.selection.createRange ();
					// check whether the selection is inside the textarea element
				var rangeParent = textRange.parentElement ();
				if (rangeParent && rangeParent.id == "test") {
						// add [smth] around the selected text
					textRange.text = "[smth]" + textRange.text + "[/smth]";

				}
			}
			else {
					// check whether some text is selected inside the textarea element
				if (textarea.selectionStart != textarea.selectionEnd) {
					var newText = textarea.value.substring (0, textarea.selectionStart) + 
								"[smth]" + textarea.value.substring  (textarea.selectionStart, textarea.selectionEnd) + "[/smth]" +
								textarea.value.substring (textarea.selectionEnd);
					textarea.value = newText;
				}
			}
		}
	</script>
</head>
<body>
	<textarea id="test" spellcheck="false">Some text in a textarea.</textarea>
	<button onclick="AddSMTH ()">Add smth around the selection</button>
</body>

If you need further details, the following pages will be useful:
selectionStart property,
createRange method,
TextRange object,
execCommand method

commented: Despite not being an answer to an inquiry of mine, the answer is throughout enough to deserve a reputation bump I say. +1
Member Avatar for Acute

Thank you very much guys!!! You are good)))

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.