Question

我有一个具有以下功能的功能：
-输入：数据数组

[
    {"position":"1","token":"Darién","tag":"PERSON"},
    {"position":"2","token":"Gap","tag":"PERSON"},
    {"position":"3","token":"make","tag":"O"},
]

我迭代该数组以获取令牌和标签，然后基于复选框选择（人或国家...等），将令牌字符串设为红色，并在div元素中显示。

 function makeNamesRed(array) {

        let result = ''

        array.forEach((element, index, array) => {
            var word = element.token;
            var tag = element.tag;

            var checkedElements = new Array();
            $("input:checkbox[name=selectionFilter]:checked").each(function () {
                checkedElements.push($(this).val());
            });

            checkedElements.forEach((elementCheck, indexCheck, arrayCheck) => {

                if (word != "-LRB-" && word != "-RRB-") {

                    if (tag == elementCheck) {
                        word = "<span class='namePerson' "
                             + "style='color:red;' "
                             + "data-toggle='tooltip' "
                             + "data-placement='top' "
                             + "title='Name of a person'>" 
                             + word 
                             + "</span>";
                        result += word + " ";
                    }

                    else {
                        result += word + " ";
                    }
                }

            })
        })
        $("#editor").html(" ");
        $("#editor").html(result);
    }

问题是在此处循环选中的复选框数组（checkedElements）

else {
    result += word + " ";
}

再次添加（未找到）单词。像这样：Dariénmake make make 。 make中的重复次数取决于选中了多少个复选框。

您是否知道如何解决并使其变得更好？

编辑：这是该情况的一个摘要：

Scenario

Answer 1

如果我正确理解了您的问题，那么问题就在于您的内在循环。您不需要对照checkedElements中的每个项目检查array中的每个项目-您只需要检查array中的每个项目是否具有一个tag属性匹配checkedElements中找到的值（使用Array.prototype.indexOf实现此目的。）

下面是一些我认为可以解决您问题的代码（我省略了您的特定条件逻辑，但您可以添加它）。

var checkedElements = ["PERSON", "LOCATION", "COUNTRY"];
const spanTemplate = `<span class='namePerson' style='color: red;' data-toggle='tooltip' data-placement='top' title='Name of a person'>{TOKEN}</span>`;

function makeNamesRed(array) {
  let result = '';
  array.forEach(el => {
    if (checkedElements.indexOf(el.tag) > -1) {
      result += spanTemplate.replace(/{TOKEN}/gi, el.token);
    }
  });
  return result;
}

console.log(makeNamesRed([{
    position: 1,
    token: "Darién",
    tag: "PERSON"
  },
  {
    position: 2,
    token: "Gap",
    tag: "PERSON"
  },
  {
    position: 3,
    token: "make",
    tag: "O"
  }
]));

如何基于复选框数组修改字符串？

1 个答案: