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-27T13:06:36.700

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 '17 at 13:06

answered Jun 27 '17 at 11:49

Shane

3,049
1
17
18

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(''); } – Micka Jun 27 '17 at 12:29
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. – Shane Jun 27 '17 at 13:08
I added an example of your solution, but it doesn't work. What did i wrong ? – Micka Jun 27 '17 at 15:48
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](https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable). – Shane Jun 27 '17 at 15:56
Ok thks. What should i write instead of "item of collection" ? – Micka Jun 27 '17 at 16:50
You can do traditional js for loop instead, `for (var i = 0; i < collection.length; i++) { var item = collection[i]; ...... }`. Most modern browsers support es6, I wouldn't suggest to keep using Netbeans as your ide for javascript. An editor such as VS Code has built in intellisense and offers many linting extensions to write proper js code. – Shane Jun 27 '17 at 16:51
Thank you Shane. I will try this today. I'll let you know. And thks for the advice about VS Code. – Micka Jun 28 '17 at 10:54

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

1 Answers1