将jQuery代码改写为Vanilla JS：querySelector与$(this).html相关问题

API 探路者

2026-5-15

解决jQuery转Vanilla JS的高亮函数问题

我来帮你搞定这个jQuery转原生JS的问题！你遇到的两个报错和疑惑，都是因为原生JS和jQuery的API逻辑不一样，咱们一步步拆解修改：

问题1：`.each() is not a function` 错误

你用document.querySelector()只会返回第一个匹配的元素，而且原生元素本身没有.each()方法。要选择所有匹配的元素，得用document.querySelectorAll()，它会返回一个NodeList集合，然后用原生的.forEach()方法来遍历每个元素。

问题2：原生JS对应`$(this).html()`的写法

jQuery的$(this).html()负责读取或设置元素的HTML内容，在原生JS里直接用元素的innerHTML属性就可以实现——读取时用element.innerHTML，设置时直接赋值就行。

改写后的完整代码

// 获取输入框的值（和你原来的写法一致）
const searchValue = document.getElementsByClassName('js-search-suggest-input')[0].value;

if (searchValue.length !== 0) {
  // 选择所有需要处理的高亮元素，用querySelectorAll
  const highlightElements = document.querySelectorAll('.search-suggest__list--categories .search-suggest__highlight');
  
  // 用forEach遍历每个元素
  highlightElements.forEach(element => {
    const searchRegexp = new RegExp(searchValue, "g");
    // 用innerHTML替换原来的$(this).html()
    element.innerHTML = element.innerHTML.replace(searchRegexp, `<span class='highlight'>${searchValue}</span>`);
  });
}