在表單的文本區域內選擇單詞時，將單詞自動轉換為主題標簽

Question

我的html表單中有一個textarea，我想讓它成為一個字，當用戶在該textarea中選擇一個單詞時，它會自動標記為主題標簽（因此，＃號會附加在前面），並轉換為已經存在的主題標簽存在的話，如果接近的話。

實現該功能所需的代碼是什么？

1. “抓住”一個單詞被選中（例如“火車”）；
2. 在主題標簽數據庫中查找（“火車”不存在，但“火車”存在）；
3. 如果發現類似的東西（例如單數而不是復數），則將單詞改為該詞（trains-> train）；
4. 在單詞（#train）前面附加＃標簽；

我可以自己執行2-3步，但對第1步和第4步很好奇。

謝謝！

PS：另外，在相關說明中，我想我最好將DIV用作我的文本區域，並在表格內創建一個隱藏的文本區域，以便復制用戶鍵入的內容，只是為了更靈活地操縱它的外觀，對嗎？

Answer 1

有一個名為jQuery MentionsInput的插件。 jquery.mentionsInput是一個很小但很棒的UI組件，它使您可以“ @mention”文本消息中的某人，就像您在Facebook或Twitter上所習慣的那樣。

集成非常簡單：

1. 向jquery.mentionsInput.js添加腳本引用：

    <script src='jquery.mentionsInput.js' type='text/javascript'></script> 

2. 添加一些標記：

    <textarea class='mention'> 

3. 初始化提及輸入：

    $('textarea.mention').mentionsInput({ onDataRequest:function (mode, query, callback) { var data = [ { id:1, name:'Kenneth Auchenberg', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' }, { id:2, name:'Jon Froda', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' }, { id:3, name:'Anders Pollas', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' }, { id:4, name:'Kasper Hulthin', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' }, { id:5, name:'Andreas Haugstrup', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' }, { id:6, name:'Pete Lacey', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' } ]; data = _.filter(data, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 }); callback.call(this, data); } }); 

你做完了！

Answer 2

要在該單詞前面附加一個字符，可以使用text.replace（“＃” + text）。 要獲取所選文本，您需要使用跨瀏覽器解決方案。 JSFiddle

var getSelected = function(){
    var t = '';
    if(window.getSelection) {
        t = window.getSelection();
    } else if(document.getSelection) {
        t = document.getSelection();
    } else if(document.selection) {
        t = document.selection.createRange().text;
    }
    return t;
}

$("#myElement").select(function(eventObject) {
    var selectedText = getSelected().toString();
    var statementReplace = $("#myElement").val();
    var replacedString = statementReplace.replace(selectedText,"#" + selectedText);
    $("#myElement").val(replacedString);

});