Как изменить строку на основе массива флажков?

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

Проблема заключается в том, что зацикливание выбранного массива флажков (checkElements) здесь

else {
    result += word + " ";
} 

добавляет слова (которые не найдены) каждый раз снова.вот так: Darién make make make .Количество повторений в make зависит от того, сколько флажков выбрано.

У вас есть идея, как решить эту проблему и сделать ее лучше?

РЕДАКТИРОВАТЬ: Вот Jsfiddle этого сценария:

Сценарий

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"
  }
]));