模仿ctrl+f全局循环搜索

最新推荐文章于 2023-07-31 13:59:04 发布

为什么我不是神经病

最新推荐文章于 2023-07-31 13:59:04 发布

阅读量280

点赞数

文章标签： javascript js vue.js html5 web

本文链接：https://blog.youkuaiyun.com/qq_42655697/article/details/116488737

版权

这段内容描述了一个实现搜索功能的智能系统。用户在搜索框输入内容后，系统会高亮显示匹配的关键词，并能通过键盘回车逐个跳转到高亮关键词处。当搜索关键词不存在时，系统会清除高亮。该系统使用了正则表达式来替换并突出显示搜索词，并且支持平滑滚动到高亮元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

搜索框：
<div class="search_input"><input v-model="searchitem" @keyup.enter="searchSubmit" @input="searchitemClear" placeholder="搜索会议内容" /></div>

搜索内容：
<span v-show="!item.isshow" v-html="changeColor(item.result)">{{item.result}}</span>

data中定义 searchhead

//  搜索内容把对应内容变为红色   
changeColor(item) {
  let searchitem = this.searchitem; //获取动态变化的搜索词
  if (searchitem !== '') { //若搜索词不为空，对搜索词进行替换
    return item.replace(new RegExp(searchitem, 'g'), '<em style="color:#d67530;padding:2px" >' + searchitem +
      '</em>');
  } else {
    return item;
  }
},
// 搜索
searchSubmit() {
  //获取所有a标签的数量，这个页面所有的a标签都是由查询替换获得的，所以a标签的数量可以当场查询到关键词的数量
  let num = document.getElementsByTagName("em").length;
  if (num != 0) { // 如果查询关键词存在，跳到第一个关键词的位置，标头增1，走满一圈归0
    // 每回车一次就到下一个标签所在的地方
    let em = document.getElementsByTagName("em")[this.searchhead];
    em.style.color = "red"
    em.scrollIntoView({
      behavior: "smooth"
    });
    em.click();
    if (this.searchhead > 0) { // 跳转到下一个的时候，重置上一个的颜色
      document.getElementsByTagName("em")[this.searchhead - 1].style.color = "#d67530"
    } else if (this.searchhead === 0) { // 新的轮回，重置最后一个的颜色
      document.getElementsByTagName("em")[num - 1].style.color = "#d67530"
    }
    if (this.searchhead < (num - 1)) {
      this.searchhead += 1;
    } else if (this.searchhead == (num - 1)) {
      this.searchhead = 0;
    }
  }
},
// 清空
searchitemClear() {
  this.searchhead = 0
},