Add Tag to Selected Text in textarea with JavaScript

Javascript Course

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

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

.some_class {
  display: list-item;
}

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net