JS Regex從textarea中刪除「太多」

Question

致力於向DB提交ID號列表。 JS旨在從每個「標籤」中添加/刪除ID＃並保存到表單中。

在下面的示例中，7,1,150的列表已從數據庫中拉出，或者由用戶按該順序輸入。按照預期，刪除項目＃1從列表中刪除,1,，但使列表7150而不是7,150。

我正在尋找一個正則表達式來幫助消除這種情況。我也有其他數字組合的其他問題。例如17,160,7刪除「7」取出7,爲17.製作清單1160,7。

"Working" Example。刪除項目1，取出兩個逗號。

JS

$("#user-interests").on('click', '.tag', function(e){ 
    e.preventDefault(); 
    var txt = $(this).attr("id"); 
    var group = $(this).data("group"); 
    var regex = new RegExp("(\,)?"+txt+"(\,)?") 
    var textList = $("#"+group+" textarea"); 
    console.log(txt); 
    if ($(this).hasClass("active")){ 
     // Remove the class, and from the textarea 
     console.log("remove from list"); 
     list = textList.text(); 
     list = list.replace(regex, ''); 
     $(textList).html(list); 
     $(this).removeClass("active"); 
    } else { 
     console.log("Add to list"); 
     textList.append(","+txt); 
     $(this).addClass("active"); 
    } 
    $(this).parents("form").submit(); 
}); 

HTML

<div id="user-interests" class="profile-form active"> 
    <button id="club-descriptions">Show Club Descriptions</button> 
    <div class="tags" id="club-list"> 
     <textarea name="user[club-list]" class="form-control" id="club-list">7,1,50</textarea> 
    </div> 
    <div class="show-descriptions"> 
     <button class="tag active" id="1" data-group="club-list">Item 1</button> 
    </div> 
    <div class="show-descriptions"> 
     <button class="tag " id="7" data-group="club-list">Item 7</button> 
    </div> 
    <div class="show-descriptions"> 
     <button class="tag " id="150" data-group="club-list">Item 150</button> 
    </div> 
</div> 

注：我也想過使用AJAX提交的每個項目，而不是整個表格。如果沒有其他選擇被曝光，那麼這樣做很好。

Answer 1

使用@ewwink中的代碼我能夠定義一個適用於我的選項並清除了很多代碼。

$("#user-interests").on('click', '.tag', function(e){ 
    e.preventDefault(); 
    var item = $(this).attr('id'); 
    var group = $(this).data('group'); 
    var $List = $("#"+group+" textarea"); 
    var list = ($List.text() != "" ? $List.text().split(",") : []); 
    var index = list.indexOf(item); 
    $(this).toggleClass("active"); 
    if (index === -1){ 
     list.push(item); 
    } else if (index > -1) { 
     list.splice(index, 1); 
    } 
    $List.html(list.join(",")); 
     $(this).parents("form").submit(); 
}); 

我也知道與indexOf()問題，但我們已經習慣了鼓勵非IE爲我們的其他一些現有的產品。

Answer 2

也許你可以創建textarea的值數組和刪除的正則表達式要求

if($(this).hasClass("active")) { 
    // Remove the class, and from the textarea 
    console.log("remove from list"); 
    list = textList.text().split(','); 
    for(var i in list) { 
    if(list[i] == txt) { 
     list.splice(i, 1); 
     break; 
    } 
    } 
    $(textList).html(list.join(',')); 
    $(this).removeClass("active"); 
} 

Answer 3

您可以在代碼中使用應用這個正則表達式：

var regex = new RegExp("(^" + txt + ",|\\b" + txt + ",|," + txt + "$)") 

$("#user-interests").on('click', '.tag', function(e) { 
 
    e.preventDefault(); 
 
    var txt = $(this).attr("id"); 
 
    var group = $(this).data("group"); 
 
    var regex = new RegExp("(^" + txt + ",|\\b" + txt + ",|," + txt + "$)") 
 
    var textList = $("#" + group + " textarea"); 
 
    if ($(this).hasClass("active")) { 
 
    // Remove the class, and from the textarea 
 
    console.log("remove from list"); 
 
    list = textList.text(); 
 
    list = list.replace(regex, ''); 
 
    $(textList).html(list); 
 
    $(this).removeClass("active"); 
 

 
    } else { 
 
    console.log("Add to list"); 
 
    textList.append("," + txt); 
 
    $(this).addClass("active"); 
 
    } 
 

 
    $(this).parents("form").submit(); 
 
}); 
 

 
$("#club-descriptions").on('click', function(e) { 
 
    e.preventDefault(); 
 
    $(".show-descriptions").toggleClass('active'); 
 
});

<div id="user-interests" class="profile-form active"> 
 
    <button id="club-descriptions">Show Club Descriptions</button> 
 
    <div class="tags" id="club-list"> 
 
    <textarea name="user[club-list]" class="form-control" id="club-list">7,1,50</textarea> 
 
    </div> 
 
    <div class="show-descriptions"> 
 
    <button class="tag active" id="1" data-group="club-list">Item 1</button> 
 
    </div> 
 
    <div class="show-descriptions"> 
 
    <button class="tag " id="7" data-group="club-list">Item 7</button> 
 
    </div> 
 
    <div class="show-descriptions"> 
 
    <button class="tag " id="150" data-group="club-list">Item 150</button> 
 
    </div> 
 
</div>

your Fiddle modified