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 is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Add Tag to Selected Text in textarea with JavaScript

Last accessed pages

  1. SHA256 Encrypt hash in JavaScript (5787)
  2. Register and show online users and visitors (22779)
  3. innerHTML and outerHTML to Get and Replace HTML content (17554)
  4. Node.js Move and Copy file (3517)
  5. Add, Change, and Remove Attributes with jQuery (36000)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (447)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (352)
  3. Register and show online users and visitors (321)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (302)
  5. Insert, Select and Update NULL value in MySQL (214)