如何在JavaScript中使用正则表达式，匹配项和执行项从文本中删除重复项

Question

我的JavaScript知识是有限的。 我使用此代码：

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”是我的div＃builder-area-center-frame-content的容器，在我的div中有类似{{FOO}}或{{TOTO}}等元素，等等。

我有一个带有选择的表单，在循环中，我为找到的每个{{XXX}}创建选项属性。 但是，例如，如果有2 {{FOO}}，则选项属性将重复两次。 像这个例子：

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

如何删除重复的{{FOO}}只保留一个？

对不起，我的英语不好，我希望你能理解我想做什么？

编辑：我尝试了您的代码，但是我渲染'let'时出现很多错误。 我正在使用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();

Answer 1

如果可以获取元素内容的字符串值，则可以使用正则表达式来匹配输入，并使用Array＃filter检查是否存在重复项。

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

编辑：您可以将for循环替换为while循环，并遍历数组中的所有项目以将新选项附加到选择元素。

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>`);
    }
}