jQuery正則表達式標簽包裝

Question

我有一個contenteditable div，我想在其中進行編輯，以便當用戶鍵入主題標簽時，該主題標簽和下一個空格之間的所有內容都將被包裝在其中

<span class="tag"></span>

例如，如果用戶輸入“嗨，我的名字叫約翰＃毛衣是一件很酷的衣服”，那么html會顯示為

 hi my name is <span class="tag">#john</span> are a cool article of clothing

到目前為止，我已經在我的javascript中做到了這一點，但我認為不知道從這里出發

$('.post_box').keydown(function(){
    var note = $(this).html();
    var hashtagPattern = /[#]/i;
    var spacePattern = /[ ]/i;
        // find hashtag
        // find space
        // get stuff between them
        var tag = stuff between them;
        tag.wrap('<span class=\"tag\" contenteditable=\"false\"/>');
 });

Answer 1

我試圖理解您的意思，盡管我不明白為什么您消失了“ sweater”，但將標簽標記為“ john”，但是，假設您擁有以下內容：

hi my name is john are a cool article of clothing

有人在“ john”上添加標簽，如下所示：

hi my name is #john are a cool article of clothing

html應該是這樣的：

hi my name is <span class="tag">#john</span> are a cool article of clothing

我對您的腳本進行了修改

$('.post_box').keyup(function(){
var note = $(this).html(), pattern = /\s\#[A-Za-z0-9]+\s/gi, tag;
while(tag = pattern.exec(note)){
note = note.replace(tag.toString(),' <span class=\"tag\" contenteditable=\"false\">'+$.trim(tag.toString())+'</span> ');
}
$(this).html("");
$(this).html(note);
});​

如果您注意到這一行：

note = note.replace(tag.toString(),' <span class=\"tag\" contenteditable=\"false\">'+$.trim(tag.toString())+'</span> ');

您會意識到，將＃標簽包裝在之間，當然，要使此代碼可用（仍然是我所認為的），仍然有很多事情要做，但這完全取決於您。

您可以在此處找到測試代碼TEST