Question

我有一个textarea，在自由文本输入中，我插入了一些<tag>中包含的标签。我希望能够点击＆lt;中的标签（即）。＆GT;并选择整个标记以便删除。整个事情，而不是一次一个角色。

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

我想我需要在点击时使用某种正则表达式检查？

更新：

好的，我会尝试修改这个问题。我不是为了让它变得更加困难，只是我一直在集思广益。

假设我预先设置了我的标签，并通过点击带有相应ID的标签将它们放入我的textarea：

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

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

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

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

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

现在，假设我编写了一条消息并插入了tag1和tag2，或者只插入了一条消息。是否可以单击该textarea中的标记插入并删除该标记以及周围的＆lt;和＆gt; ？

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>

编辑：由于您使用的是jQuery，fieldSelection plugin可能会让事情变得更加清晰。

至于一个简单的正则表达式解决方案，没有立刻想到，但我也不是regexpert :)。

再次编辑：我更改了原始代码，以便它现在支持IE。在Firefox，Chrome和IE 6/7/8中测试。

使用jQuery在textarea中选择整个单词

1 个答案: