使用jQuery在textarea中選擇整個單詞

Question

我有一個textarea，並且在自由文本輸入中插入一些標記，其中包含<tag>。我希望能夠在<>內點擊標籤（即）並選擇整個標籤以便刪除。整個事情，而不是一次一個字符。

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

我想我需要使用某種正則表達式檢查點擊嗎？

---

UPDATE：

OK，我會嘗試修改這個問題。我沒有這樣做讓它變得更加困難，只是我一直在頭腦風暴。

比方說，我有我的標籤預定義的，我把它們放在我的textarea通過點擊與對應的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> 

現在，讓我們說，我編寫了消息並插入兩個都TAG1和TAG2或只是一個。是否可以點擊該文本區域內的標籤插入並刪除該標籤以及周圍的<和>？

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可能會使事情變得更乾淨。

對於一個簡單的regex的解決方案，沒有立即想到的，但我也沒有regexpert :)

再次編輯：我改變了我的原代碼，以便它現在支持IE瀏覽器。經過Firefox，Chrome和IE 6/7/8的測試。