将jQuery重写为Vanilla JS，querySelector和$(this).html

Question

我有一个工作函数，它查找输入字段中键入的字符，并添加一个带有突出显示类的 span 元素。

自动取款机 我正在尝试将函数的jQuery部分重写为香草JS，并且遇到了一些问题。例如，我试图用像这样的香草 JS querySelector 替换以下$('.search-suggest__list--categories .search-suggest__highlight')： document.querySelector('.search-suggest__list--categories .search-suggest__highlight'); ，但是当我运行代码时，我得到.each() is not a function返回。

我也很难理解 $(this(.html 在 Vanilla JS 中等于什么。

这是我的函数：

var search_value = document.getElementsByClassName('js-search-suggest-input')[0].value;
if(search_value.length !== 0){
    $('.search-suggest__list--categories .search-suggest__highlight').each(function(){
        var search_regexp = new RegExp(search_value, "g");
        $(this).html($(this).html().replace(search_regexp,"<span class='highlight'>"+search_value+"</span>"));
    });
}

Answer 1

1. 使用 querySelectorAll 获取具有提供选择器的所有元素。
2. 使用 forEach 遍历它们 - each jQuery函数，因为每个都在NodeList.prototype
3. this.innerHTML相当于$(this).html()。 - 内部HTML读取

这应该足以让您完成任务。