Question

I have a textarea and among free text input I insert some tags that are enclosed in <tag>. I’d like to be able to click on a tag (i.e.) within < > and select the whole tag in order to delete. the whole thing and not one character at a time.

<textarea>some text and <my tag> here</textarea>

I suppose I need to use some sort of regex check on click?

---

UPDATE:

OK, I’ll try to modify this question. I’m not doing it to make it more difficult, it’s just I keep brainstorming as well as I go.

Let’s say I have my tags predefined and I put them in my textarea by clicking a with corresponding ID:

var myTag1 = "my tag",
myTag2 = "another tag";

$("#tag1").text(myTag1);
$("#tag2").text(myTag2);

$(".tags").click(function () {
    var insertTag = $(this).text();
    $('#myTextArea').append(" <" + insertTag + ">");
});

<div id="tag1" class="tags"></div>
<div id="tag2" class="tags"></div>

<textarea id="myTextArea"></textarea>

Now, let’s say I composed a message and inserted either both tag1 and tag2 or just one. Is it possible to click on a tag insert within that textarea and delete that tag as well as surrounding < and > ?

DEMO: http://jsfiddle.net/2K2CX/2/

Answer 1

<textarea id="textarea" style="width:500px;height:200px;">Lorem ipsum dolor sit amet, consectetur <adipiscing> elit. Aliquam adipiscing feugiat vestibulum. <Proin risus massa>, cursus quis eleifend tristique, pharetra eget ligula. <Suspendisse potenti>. Etiam vel lectus ante. Fusce varius laoreet lobortis. Aliquam ornare dictum lacus, non pharetra mauris fringilla sit amet. Quisque accumsan viverra dui, non pellentesque arcu bibendum et. Sed vel odio in libero scelerisque posuere. Phasellus euismod leo non arcu vulputate in sollicitudin sem facilisis. Morbi et dui luctus sem molestie commodo ac vel justo.</textarea>
<script type="text/javascript">
    var textarea = document.getElementById("textarea");
    textarea.onclick = textarea_Click;

    function textarea_Click() {
        var caret = getCaretPosition(textarea);
        var text = textarea.value;
        var begin = caret - 1;
        while (begin >= 0) {
            if (text.charAt(begin) == '>') return;
            else if (text.charAt(begin) == '<') break;
            else begin--;
        }

        if (begin >= 0) {
            var end = caret;
            while (end < text.length) {
                if (text.charAt(end) == '>') break;
                else end++;
            }

            if (end < text.length)
                setSelection(textarea, begin, end);
        }
    }

    function getCaretPosition(el) {
        if (el.selectionStart) {
            return el.selectionStart;
        } else if (document.selection) {
            var r = document.selection.createRange();
            if (r == null) return 0;
            var re = el.createTextRange();
            var rc = re.duplicate();
            re.moveToBookmark(r.getBookmark());
            rc.setEndPoint('EndToStart', re);
            return rc.text.length;
        }
        return 0; 
    }

    function setSelection(el, begin, end) {
        if ("selectionStart" in el) {
            el.selectionStart = begin;
            el.selectionEnd = end + 1;
        } else if (document.selection) {
            var range = el.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end + 1);
            range.moveStart('character', begin);
            range.select();
        }
    }
</script>

---

EDIT: Since you’re using jQuery, the fieldSelection plugin might make things a lot cleaner.

As for a simple regex solution, nothing immediately comes to mind, but I’m also no regexpert 🙂

EDITED AGAIN: I changed my original code so that it now supports IE. Tested in Firefox, Chrome, and IE 6/7/8.