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