how to check if array contains more then one of the same word

Question

I'm making a tagging system, and I cannot figure out how to prevent users from spamming the same tag. My only thought is to add each into an array. And make it not add it again once they click it again, but I cannot figure it out. If anyone could help that would be great!

here is my code sample:

<select multiple="multiple" size="10" id="tag_name">
   <option>apple</option>
   <option>pear</option>
   <option>pineapple</option>
   <option>peach</option>
   <option>strawberry</option>
   <option>raspberry</option>
   <option>cherry</option>
   <option>watermelon</option>
   <option>orange</option>
   <option>banana</option>
   <option>grape</option>
   <option>honeydew</option>
   <option>apricot</option>
</select>
<!-- appended tags wrapper -->
<div class="tags"></div>
<script type="text/javascript">
   var tag_count = 0;
   var tag_array = "";
   $("#tag_name").click(function(){
      var tag = $("#tag_name").val();
      if(!tag == ""){
         tag_array = tag_array+tag+", ";
         tag_count = tag_count+1;
         if(????){
            if(tag_count != 11){
               $(".tags").append("<div style=\"margin: 5px;\" class=\"tag\"><p>"+tag+"</p><a href=\"#\">x</a></div>");
            } else {
               $(".tags").append("<div style=\"margin: 5px;\" class=\"tag\"><p>15 tags already selected!</p><a href=\"#\">x</a></div>");
               $("#tag_name").attr("disabled","disabled");
            }
         }
      }
   });
</script>

i tried that, the user will be adding them one by one into the array, not all at once — loelelele020202
– loelelele020202, Commented Oct 23, 2018 at 8:17
1) What is if(????){? 2) Every time you will reload the page, all the tag will be lost or you registered them in database or somewhere? 3) Every time you add a tag, you create a new div with the tag as content, right? Just make a select with all .tag element and check if you already same tag maybe — Mickaël Leger
– Mickaël Leger, Commented Oct 23, 2018 at 8:22
Using set would be an approach, which is similar to an array, but does only allow one value once. developer.mozilla.org/de/docs/Web/JavaScript/Reference/… — Matthi
– Matthi, Commented Oct 23, 2018 at 8:26

score 1 · Accepted Answer · 2018-10-23 08:29:32Z

1

How about String.indexOf()?

if (tag_count != 11 && -1 === tag_array.indexOf(tag)) {
  tag_array += tag + ", ";
  tag_count = ++;
  $(".tags").append("<div style=\"margin: 5px;\" class=\"tag\"><p>" + tag + "</p><a href=\"#\">x</a></div>");
} else {
  ..
}

edited Oct 23, 2018 at 8:29

answered Oct 23, 2018 at 8:21

user2575725

Sign up to request clarification or add additional context in comments.

Comments

Ussaid Iqbal · Accepted Answer · 2018-10-23 08:34:46Z

The following code will do the job!

var tag_count = 0;
   var tag_array = [];
   $("#tag_name").click(function(){
      var tag = ""+$("#tag_name").val();
       if(!tag == ""){
        if(tag_array.indexOf(tag) < 0){
         tag_array.push(tag);
         tag_count = tag_count+1;
         console.log(tag_array);
            if(tag_count != 11){
               $(".tags").append("<div style=\"margin: 5px;\" class=\"tag\"><p>"+tag+"</p><a href=\"#\">x</a></div>");
            } else {
               $(".tags").append("<div style=\"margin: 5px;\" class=\"tag\"><p>15 tags already selected!</p><a href=\"#\">x</a></div>");
               $("#tag_name").attr("disabled","disabled");
            }
         }else{
              console.log("Alredy Tagged - "+tag);
            }
      }
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="multiple" size="10" id="tag_name">
   <option>apple</option>
   <option>pear</option>
   <option>pineapple</option>
   <option>peach</option>
   <option>strawberry</option>
   <option>raspberry</option>
   <option>cherry</option>
   <option>watermelon</option>
   <option>orange</option>
   <option>banana</option>
   <option>grape</option>
   <option>honeydew</option>
   <option>apricot</option>
</select>

Rory McCrossan · Accepted Answer · 2018-10-23 08:22:26Z

The simplest way to achieve this would be to just build the HTML of .tags upon the change event of the select. Then you can simply rebuild the entire list every time it changes. As an element can then only be selected once, there can be no duplicates. Try this:

$("#tag_name").change(function() {
  var values = $(this).val();
  if (values.length > 10) {
    $('.tags').html('<div class="tag"><p>15 tags already selected!</p><a href="#">x</a></div>');
  } else {
    var tagsHtml = values.map(function(v) {
      return '<div class="tag"><p>' + v + '</p><a href="#">x</a></div>';
    }).join('');
    $('.tags').html(tagsHtml);
  }
});

.tag {
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple="multiple" size="10" id="tag_name">
  <option>apple</option>
  <option>pear</option>
  <option>pineapple</option>
  <option>peach</option>
  <option>strawberry</option>
  <option>raspberry</option>
  <option>cherry</option>
  <option>watermelon</option>
  <option>orange</option>
  <option>banana</option>
  <option>grape</option>
  <option>honeydew</option>
  <option>apricot</option>
</select>

<div class="tags"></div>

Note the use of ' as the outer string delimiter. This avoids the requirement to use the ugly escape character for inner double quotes.

ste2425 · Accepted Answer · 2018-10-23 08:22:57Z

0

You haven't got an Arrray there, just a string where you concatenate a new value on.

However you could still use .includes() here

A better option would be to use an array and see if the value your attempting to add exists in it.

So change:

var tag_array = "" to var tag_array = [];

and

tag_array = tag_array+tag+", "; to tag_array.push(tag);

Then you can do tag_array.includes(tag) to see if the tag exists in the array. However i would suggest doing that check before you insert the value into the array or it will always be true. docs

If later you need a comma separated string of tags you can do

tag_array.join(', ');

answered Oct 23, 2018 at 8:22

ste2425

4,8473 gold badges26 silver badges39 bronze badges

Comments

Jonathan · Accepted Answer · 2018-10-23 08:24:25Z

0

You should try using a Set instead of an Array. This way each entry will be unique.

const set1 = new Set(["Apple", "Orange"]);
set1.add("Apple");
console.log(Array.from(set1));

answered Oct 23, 2018 at 8:24

Jonathan

9,1924 gold badges47 silver badges82 bronze badges

1 Comment

Matthi Over a year ago

@loelelele020202 Just a hint: Watch out for browser compatibility and potentially add a polyfill. developer.mozilla.org/de/docs/Web/JavaScript/Reference/…

Sara Vaseei · Accepted Answer · 2018-10-23 08:36:22Z

0

for(i = 0; i< MyArray.length(); i++){
    for(j = 0; j< MyArray.length(); j++){
        if (i != j){
            if(new String(MyArray[i]).valueOf() == new String(MyArray[j]).valueOf()){
                return i;
            }
        }
    }
}

If you know they are strings, then there's no need to check for type.(MyArray[i]) == MyArray[j]))

answered Oct 23, 2018 at 8:36

Sara Vaseei

8431 gold badge10 silver badges16 bronze badges

Collectives™ on Stack Overflow

how to check if array contains more then one of the same word

6 Answers 6

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related