How to remove duplicates from text using regex, match and exec in javascript

Question

My javascript knowledge is limited. I use this code :

var myString = $("#builder-area-center-frame-content").html();
var pattern = /{{(.*?)}}/g;
var match;

while ((match = pattern.exec(myString)) !== null ){
    $("#sim-edit-variable-replace").show();
    $("#sim-edit-variable-replace select[name=variable_element]").append('<option value="'+ match[0] +'">'+ match[1] +'</option>');
}

'myString' is the container of my div #builder-area-center-frame-content, and in my div there are elements like that {{FOO}} or {{TOTO}}, etc...

I have a form with a select and in my loop i create option attribut for each {{XXX}} found. But if there are, for example, 2 {{FOO}}, the option attribut will be repeat twice. Like this example :

<select class="form-control" name="variable_element"><option value="{{FOO}}">FOO</option><option value="{{FOO}}">FOO</option><option value="{{toto}}">toto</option></select>

How can i remove duplicate {{FOO}} to keep only one ?

Sorry for my bad english, i hope you will understand what i want to do ?

EDIT : I tried your code but i have a lot of error of rendering about 'let'. I'm using NetBeans.

function variable_replace() {

  let str = $("#builder-area-center-frame-content").html();
  let collection = str.match(/{{[aA-zZ]+}}/g).filter((item, index, self) => index === self.indexOf(item));

  if (collection.length > 0) {
    $('#sim-edit-variable-replace').show();
    let elem = $('#sim-edit-variable-replace select[name=variable_element]');
    for (let item of collection) {
    elem.append('<option value="${item.replace(/[{}]/g, '')}">${item}</option>');
    }
  }
}
variable_replace();

Shane · Accepted Answer · 2017-06-27 13:06:36Z

1

If you can get the string value of the content of your element, you can use a regex to match for the input and use Array#filter to check if there are any duplicates.

let str = '{{TODO}}{{FOO}}{{FOO}} {{TODO}}';

let collection = str.match(/{{[aA-zZ]+}}/g).filter((item, index, self) => index === self.indexOf(item));

console.log(collection);

EDIT: You can replace the while loop with an for loop and iterate over all items in the array to append new options to the selection element.

if (collection.length > 0) {
    $('#sim-edit-variable-replace').show();

    let elem = $('#sim-edit-variable-replace select[name=variable_element]');
    for (let item of collection) {
        elem.append(`<option value="${item.replace(/[{}]/g, '')}">${item}</option>`);
    }
}

edited Jun 27, 2017 at 13:06

answered Jun 27, 2017 at 11:49

Shane

3,2091 gold badge19 silver badges18 bronze badges

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

7 Comments

Micka Over a year ago

Thank you a lot @Shane. Yes i can get the string and it's working with your code, but how can i use it with my loop to create "option". while ((match = pattern.exec(myString)) !== null ){ $("#sim-edit-variable-replace").show(); $("#sim-edit-variable-replace select[name=variable_element]").append('<option value="'+ match[0] +'">'+ match[1] +'</option>'); }

Shane Over a year ago

You do not get notifications from editing a post, I've added an solution to replace your current loop to the newly created collection above.

Micka Over a year ago

I added an example of your solution, but it doesn't work. What did i wrong ?

Shane Over a year ago

The let keyword is introduced in es6. It is the new standard for newer JavaScript and replaces var. The difference between the two keywords is due to the js scopes. It's too much to explain the difference in a comment and not related to this post, however if you're interested in the differences you can check the accepted answer on this question.

Micka Over a year ago

Ok thks. What should i write instead of "item of collection" ?

|

Collectives™ on Stack Overflow

How to remove duplicates from text using regex, match and exec in javascript

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related