Vue应用中DOM关键词搜索高亮滚动出现选择器无效错误求助

问题根源 #

你遇到的DOMException是因为CSS选择器语法错误：body*是无效写法，正确的应该是body *（body与*之间必须加空格），表示匹配<body>下的所有后代元素，再排除script、style、title这类不需要搜索的标签。

修正后的完整实现 #

1. 搜索方法代码 #

search() {
  // 清除之前的高亮标记
  document.querySelectorAll('.search-highlight').forEach(el => {
    el.replaceWith(...el.childNodes)
  })

  const searchTerm = this.searchTerm // 确保能访问到Vue实例中的搜索关键词
  if (!searchTerm.trim()) return

  // 修正后的合法选择器
  const matches = document.querySelectorAll("body *:not(script):not(style):not(title)")
  let firstMatchElement = null

  matches.forEach(element => {
    // 跳过已经被高亮处理过的元素，避免重复操作
    if (element.classList.contains('search-highlight')) return

    if (element.textContent.includes(searchTerm)) {
      // 创建正则匹配关键词（忽略大小写）
      const keywordRegex = new RegExp(`(${searchTerm})`, 'gi')
      // 用高亮span包裹关键词
      element.innerHTML = element.innerHTML.replace(keywordRegex, '<span class="search-highlight">$1</span>')

      // 记录第一个匹配的元素，用于滚动定位
      if (!firstMatchElement) {
        firstMatchElement = element.querySelector('.search-highlight') || element
      }
    }
  })

  // 滚动到第一个匹配位置
  if (firstMatchElement) {
    firstMatchElement.scrollIntoView({ 
      behavior: 'smooth', 
      block: 'center' // 让元素居中显示在视口
    })
  }
}

2. 添加高亮样式 #

在Vue的样式文件中添加：

.search-highlight {
  background-color: #ffeb3b; /* 黄色高亮 */
  padding: 1px 3px;
  border-radius: 2px;
}

注意事项 #

• Vue响应式DOM风险：如果直接修改Vue管理的DOM元素的innerHTML，可能会破坏Vue的响应式绑定。如果是组件内部的DOM，建议通过ref获取目标容器，缩小搜索范围，而不是搜索整个body。
• XSS防护：如果搜索关键词是用户输入的，直接用innerHTML替换可能存在XSS风险，建议先对关键词进行转义，比如：

  const escapeHtml = (str) => {
    return str.replace(/[&<>"']/g, char => ({
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#039;'
    }[char]))
  }
  // 使用时：
  const escapedTerm = escapeHtml(searchTerm)
  const keywordRegex = new RegExp(`(${escapedTerm})`, 'gi')
  

内容的提问来源于stack exchange，提问作者gabogabans