The JavaScript function presented in this page can be used to add HTML, or BBCode Tag, to selected text in textarea. This function, addTagSel(), receives two arguments: the tag name, and the id of textarea. Returns the selected text, with tag; and points the cursor at the end of selected text in textarea.
- By default, adds HTML tag. To add BBCode, replace: new Array('<', '>'); with: new Array('[', ']'); in the code of the function.

addTagSel() Function Code

// Function to add <tag>To Selected text</tag> in textarea with id of idelm
// Receives the tag name, and the id of textarea.
// Points the cursor at the end of selected text in textarea
// Returns the selected text, with tag
function addTagSel(tag, idelm) {
  // https://CoursesWeb.net/javascript/
  var tag_type = new Array('<', '>');        // for BBCode tag, replace with:  new Array('[', ']');
  var txta = document.getElementById(idelm);
  var start = tag_type[0] + tag + tag_type[1];
  var end = tag_type[0] +'/'+ tag +  tag_type[1];
  var IE = /*@cc_on!@*/false;    // this variable is false in all browsers, except IE

  if (IE) {
    var r = document.selection.createRange();
    var tr = txta.createTextRange();
    var tr2 = tr.duplicate();
    tr2.moveToBookmark(r.getBookmark());
    tr.setEndPoint('EndToStart',tr2);
    var tag_seltxt = start + r.text + end;
    var the_start = txta.value.replace(/[\r\n]/g,'.').indexOf(r.text.replace(/[\r\n]/g,'.'),tr.text.length);
    txta.value = txta.value.substring(0, the_start) + tag_seltxt + txta.value.substring(the_start + tag_seltxt.length, txta.value.length);

    var pos = txta.value.length - end.length;    // Sets location for cursor position
    tr.collapse(true);
    tr.moveEnd('character', pos);        // start position
    tr.moveStart('character', pos);        // end position
    tr.select();                 // selects the zone
  }
  else if (txta.selectionStart || txta.selectionStart == '0') {
    var startPos = txta.selectionStart;
    var endPos = txta.selectionEnd;
    var tag_seltxt = start + txta.value.substring(startPos, endPos) + end;
    txta.value = txta.value.substring(0, startPos) + tag_seltxt + txta.value.substring(endPos, txta.value.length);

    // Place the cursor between formats in #txta
    txta.setSelectionRange((endPos+start.length),(endPos+start.length));
    txta.focus();
  }
  return tag_seltxt;
}

- Example of usage addTagSel() function. Adds tag to selected text in textarea, and displays a message window with the selected text and tag.
<form action="#" method="post">
 <textarea name="my_textarea" id="my_textarea" cols="55" rows="4">Free JavaScript and jQuery Courses, tutorials: https://CoursesWeb.net/javascript/</textarea><br />
 <input type="button" id="addtag" value="AddTag" />
</form>

<script type="text/javascript">
// <![CDATA[
// Function to add <tag>To Selected text</tag> in textarea with id of idelm
// Receives the tag name, and the id of textarea.
// Points the cursor at the end of selected text in textarea
// Returns the selected text, with tag
function addTagSel(tag, idelm) {
  // https://CoursesWeb.net/javascript/
  var tag_type = new Array('<', '>');        // for BBCode tag, replace with:  new Array('[', ']');
  var txta = document.getElementById(idelm);
  var start = tag_type[0] + tag + tag_type[1];
  var end = tag_type[0] +'/'+ tag +  tag_type[1];
  var IE = /*@cc_on!@*/false;    // this variable is false in all browsers, except IE

  if (IE) {
    var r = document.selection.createRange();
    var tr = txta.createTextRange();
    var tr2 = tr.duplicate();
    tr2.moveToBookmark(r.getBookmark());
    tr.setEndPoint('EndToStart',tr2);
    var tag_seltxt = start + r.text + end;
    var the_start = txta.value.replace(/[\r\n]/g,'.').indexOf(r.text.replace(/[\r\n]/g,'.'),tr.text.length);
    txta.value = txta.value.substring(0, the_start) + tag_seltxt + txta.value.substring(the_start + tag_seltxt.length, txta.value.length);

    var pos = txta.value.length - end.length;    // Sets location for cursor position
    tr.collapse(true);
    tr.moveEnd('character', pos);        // start position
    tr.moveStart('character', pos);        // end position
    tr.select();                 // selects the zone
  }
  else if (txta.selectionStart || txta.selectionStart == "0") {
    var startPos = txta.selectionStart;
    var endPos = txta.selectionEnd;
    var tag_seltxt = start + txta.value.substring(startPos, endPos) + end;
    txta.value = txta.value.substring(0, startPos) + tag_seltxt + txta.value.substring(endPos, txta.value.length);

    // Place the cursor between formats in #txta
    txta.setSelectionRange((endPos+start.length),(endPos+start.length));
    txta.focus();
  }
  return tag_seltxt;
}

// registers onclick event to element with id="addtag"
document.getElementById('addtag').onclick = function() {
  // calls the addTagSel() function for "my_textarea", displaying the selected text and tag into an alert window
  var tag_seltxt = addTagSel('tag', 'my_textarea');
  alert(tag_seltxt);
};
// ]]>
</script>
Demo (select text in textarea, then click the AddTag button):

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
Add Tag to Selected Text in textarea with JavaScript

Last accessed pages

  1. Create simple Website with PHP (22305)
  2. querySelector and querySelectorAll (9267)
  3. Get and Check variable type in JavaScript (590)
  4. Dynamic variables in JavaScript (7620)
  5. Multidimensional arrays and array functions (6248)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2459)
  2. Contact page - CoursesWeb (2375)
  3. Tabs effect with CSS (2365)
  4. Insert, Select and Update NULL value in MySQL (1353)
  5. PHP getElementById and getElementsByTagName (931)