问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
船到桥头自然直
    18210117178

    image.png

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

    1. 搜索关键词
    2. 滚动条定位到关键词所在的位置
    3. 高亮关键词
    vue.js前端
    阅读 10.2k
    3 个回答
    得票最新
    头像
    ermu
      50017
      ✓ 已被采纳
      <!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的距离可根据业务需求做调整

      头像
      牛书书
        10.1k71935

        那个啥，用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即可。

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

        头像头饰
        HAWNRE
          341128

          感觉跟我这个差不多，思路就是查找出匹配的字符串，然后替换成带有样式的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'
        })
    }
});
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题
          宣传栏