首页 > 其他分享> > vue全文搜索高亮显示

vue全文搜索高亮显示

2020-12-17 10:35:24 作者：互联网

方法一：

<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

标签：vue,高亮,msgAssembly,highLightStr,highLightAssembly,length,htmlStr,msg,全文
来源： https://www.cnblogs.com/xiaobaibubai/p/14148182.html