Динамическое выделение текста в <li>на основе отмеченных флажков

Question

У меня есть веб-страница, которая генерирует <li> из Json объекта, переданного из flask маршрута приложения. У меня есть набор флажков, сгенерированных динамически из того же объекта Json. То, что я хотел сделать, это выделить слова в <li> text ... </li>, если есть совпадение с любым флажком.

Это то, что я сделал до сих пор.

Java скрипт для захвата отмеченных флажков и поиска совпадений в <li>

$(".topic-check").change(function(){
    var chkTopicIDs = checkTopics();

    console.log(chkTopicIDs);

    list_items = document.querySelectorAll(".sent");

    for (item of list_items){
        var text = item.textContent;

        if (new RegExp(chkTopicIDs.join("|")).test(text)){
            item.classList.add("highlight");
        }
        else {
            item.classList.remove("highlight");
        }
    }
});

function checkTopics(){

    $checkbox = $('.topic-check');

    var chkArray = [];
    chkArray = $.map($checkbox, function(el){
        if(el.checked){return el.id}
    });

    return chkArray;
}

CSS для выделения

.highlight{
    background: yellow;
}

HTML шаблон с jinja тегами

...
<ul>
    {% for sent in turn['list_of_sentences'] %}
        <li class="sent">{{sent['text']}}</li>
    {% endfor %}
</ul>
...
<div class="card-body">
    {% for topic in response['topics'] %}
    <div>
        <input type="checkbox" id="{{topic}}" class="topic-check" onclick="func1()" /> <label class="checkbox-inline" >{{ topic }}</label> <br/>
    </div>
    {% endfor %}
</div>
...

Я сделал проверку работоспособности, чтобы посмотреть, получаю ли я список проверенных флажков. Консоль отображает идентификаторы, чтобы эта часть работала. Но я не вижу выделение текста независимо от того, установлены ли флажки.

Примечание: я также вижу следующую ошибку в консоли JS. ReferenceError: func1 is not defined

Answer 1

1) У вас есть опечатка здесь: item.classList.add("highlist") - должно быть highlight правильно?

2) onclick="func1()" это вызывает ваше func1 is not defined, просто удалите его.

3) Я не знаю, так ли это, но $(".topic-check").change не будет работать с динамически добавляемым HTML. Вам нужно что-то вроде $(".card-body").on("change", ".topic-check", function)

4) Вы должны хранить new RegExp(chkTopicIDs.join("|")) как переменную вне l oop для повышения производительности