vue搜索并滚动定位到div内关键词的位置,高亮显示,如何做到?

船到桥头自然直
  • 121

image.png

如图,一个单独的div滚动框
想要实现的效果是:

  1. 搜索关键词
  2. 滚动条定位到关键词所在的位置
  3. 高亮关键词
回复
阅读 4.4k
3 个回答
✓ 已被采纳
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #text{
      width: 200px;
      height: 100px;
      font-size: 16px;
      line-height: 20px;
      overflow-y: auto;
      border: 1px solid #ff00ff;
    }
    .light-high{
      color: #ff00ff;
    }
  </style>
</head>
<body>
  <input id="keyword" type="text">
  <button id="search">搜索</button>
  <p id="text">
    Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。2005年以后,互联网进入Web 2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。
  </p>
  <script>
    const i = document.getElementById('keyword')
    const b = document.getElementById('search')
    const t = document.getElementById('text')
    const initText = t.innerHTML;
    b.addEventListener('click',function(){
      const keyword = i.value;
      const index = initText.indexOf(keyword)
      const arr = initText.split('');
      arr.splice(index, keyword.length, `<span class="light-high">${keyword}</span>`)
      console.log(arr.join(''))
      t.innerHTML = arr.join('')
      scrollTo(index)
    })
    function scrollTo(index){
      const height = t.scrollHeight,width = t.scrollWidth,wordWidth  = 16,lineHeight = 20;
      const row = (index * wordWidth/width).toFixed(0)
      t.scrollTop = (row-1)*lineHeight
    }
  </script>
</body>
</html>

思路大概是这样,scrollTop的距离可根据业务需求做调整

那个啥,用vue的话实现很简单了。
假设文本变量是content,
那添加一个计算属性contentShow, 使用指令v-html渲染出来.
contentShow中将关键词替换为一个font或span标签,给这个font和span写高亮样式即可。
比如:
content: '你好啊'
keyword: '你'

contentShow: <font class="text-search-match">你</font>好啊

css:
.text-search-match {
// 高亮样式
}

滚动的话,你需要用一个变量n记录当前搜索是到第几个关键词,回车或者点击下一个的时候则跳到下一个关键词.
取第n个关键词很简单,使用querySelectorAll()查出所有被替换的关键词标签列表,获取指定下标的元素,然后scrollIntoView即可。


嘿嘿简单吧,如有困惑可追问

感觉跟我这个差不多,思路就是查找出匹配的字符串,然后替换成带有样式的html标签,然后重新写入容器,如果还需要定位功能的话,再获取到那个dom的位置然后算出scrollTop的值就可以了
图片描述

$('.actionBtnTit').each(function(index,item){
    let content = item.innerHTML;
    let result = content.search(val);
    if(result>=0&&val!='') {
       $(this).siblings('.actionBtnIco').css({
           background:'#F76260'
       })
    } else {
        $(this).siblings('.actionBtnIco').css({
            background:'#10AEFF'
        })
    }
});
宣传栏