Fork me on GitHub

vue全文搜索高亮显示

方法一：

<html>
<head>
  <title>无标题页</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0">
<script src="js/vue.min.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
   <div class="box">
    <div class="left">
     <input type="text" placeholder="搜索数据" v-model="keywords" />
    </div>
    <div class="content">
         <span v-html="highLight(al.ajmc,keywords)">        
         </span>
    </div>
   </div>
  </div>
  <script>
   var vm = new Vue({
    el: '#app',
    data: {
     keywords: '',
     al:{"ajmc":"抱一抱就当作从没有在一起抱一抱就当作从没有在抱就当作从没有在一起抱一抱就当作从没有在一起"
    }},
    methods:{
         highLight:function(item, highLight){
           return this.highLightTableMsg(item, highLight)
        },
        highLightTableMsg:function(msg, highLightStr){
            if (msg == null) {
                msg = ''
            }
            if (highLightStr == null) {
                highLightStr = ''
            }
            if (msg instanceof Object) {
                msg = JSON.stringify(msg)
            }
            if (highLightStr instanceof Object) {
                highLightStr = JSON.stringify(highLightStr)
            }
            if (!(msg instanceof String)) {
                msg = msg.toString()
            }
            if (!(highLightStr instanceof String)) {
                highLightStr = highLightStr.toString()
            }
            var htmlStr = ''
            if (highLightStr.length > 0) {
                if (msg.indexOf(highLightStr) !== -1) {
                    assemblyStr(msg, highLightStr)
        
                } else {
                    htmlStr = '<span>' + msg + '</span>'
                }
            } else {
                htmlStr = '<span>' + msg + '</span>'
            }
            function assemblyStr(msgAssembly, highLightAssembly) {
                if (msgAssembly.indexOf(highLightAssembly) !== -1) {
                    var length = highLightAssembly.length
                    // alert(length)
                    var start = msgAssembly.indexOf(highLightAssembly)
                    htmlStr = htmlStr + '<span>' + msgAssembly.substring(0, start) + '</span>' + '<span style="background-color:#ffe72d;">' + highLightAssembly + '</span>'
                    msgAssembly = msgAssembly.substring(start + length, msgAssembly.length)
                    assemblyStr(msgAssembly, highLightAssembly)
                } else {
                    htmlStr = htmlStr + '<span>' + msgAssembly + '</span>'
                }
            }
            return htmlStr;
        }
    }
   })
  </script>
</body>
</html>

 原博客地址：https://blog.csdn.net/jingyoushui/article/details/102566534

posted @ 2020-12-17 10:23  小白不白10  阅读(497)  评论(0)  编辑  收藏  举报