angular 实现输入查找并高亮显示

写了个angular demo。现在能实现查出并给输入文字加上标签(类似浏览器ctrl+f)但还没实现高亮显示(标签没解析)。代码如下,粘入html直接打开即可运行,在线编辑器运行不了,能否麻烦大神帮忙看看,怎么让里面的标签以html形式解析出来,多谢!($sce、ngSanitize都试过了,但是没搞出来)

    <!DOCTYPE html>
    <html lang="en" ng-app="a1">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
      <style>
        .highlight {
          background-color: yellow;
        }
      </style>
    </head>
    <body>
    <div ng-controller="c1">
        <input type="text" name="search" ng-model="inputTxt">
        <div class="markdown-body">
          <h1>{{"Hello"|ligthTxt:inputTxt}}</h1>
          <h1>{{"hello"|ligthTxt:inputTxt}}</h1>
        </div>
        <div class="testShow"></div>
    </div>
    <script>
        var a1=angular.module('a1',[]);
        a1.controller('c1',function($scope){
            $scope.inputTxt="";
        })
    
        a1.filter('ligthTxt',function($sce){
          return function(e,type){
            var reg = new RegExp(type,"g");
            var result="";
            //var origin="";
            if(type.length!=0&&e.indexOf(type)>-1){
              result=e.replace(reg, '<span class=\'highlight\'>' + type + '</span>');
              //origin=document.getElementsByClassName('markdown-body')[0].innerHTML;
            }else{
              result=e;
              //origin=document.getElementsByClassName('markdown-body')[0].innerHTML;
            }
            //origin=$sce.trustAsHtml(result)
            return $sce.trustAsHtml(result);
          }
    
        })
    </script>
    </body>
    </html>

感谢感谢!!!

阅读 3.8k
1 个回答

过滤器没改你的,只是调整了点控制器跟html的代码

现在能够实现你想要的效果,但是这种实现方法是不好的,建议你去看下别的插件的代码

你没有高亮显示的原因是因为你替换之后已经变成字符串了,这个时候要用ng-bind-html再编译一下。

满意请采纳。

<!DOCTYPE html>
    <html lang="en" ng-app="a1">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
      <style>
        .highlight {
          background-color: yellow;
        }
      </style>
    </head>
    <body>
    <div ng-controller="c1">
        <input type="text" name="search" ng-model="inputTxt" ng-change="lightText()">
        <div class="markdown-body">
            <p ng-bind-html="text"></p>
        </div>
        <div class="testShow"></div>
    </div>
    <script>
        var a1=angular.module('a1',[]);
        a1.controller('c1',function($scope, $sce, $filter){
            $scope.inputTxt="";
            $scope.orginText = "HELLO";
            $scope.text = $sce.trustAsHtml($scope.orginText);
            $scope.lightText = function(){
                $scope.text = $filter('ligthTxt')($scope.orginText, $scope.inputTxt) ;
            };
        })
            
            
        a1.filter('ligthTxt',function($sce){
          return function(e,type){
            var reg = new RegExp(type,"g");
            var result="";
            //var origin="";
            if(type.length!=0&&e.indexOf(type)>-1){
              result=e.replace(reg, '<span class=\'highlight\'>' + type + '</span>');
              //origin=document.getElementsByClassName('markdown-body')[0].innerHTML;
            }else{
              result=e;
              //origin=document.getElementsByClassName('markdown-body')[0].innerHTML;
            }
            //origin=$sce.trustAsHtml(result)
            return $sce.trustAsHtml(result);
          }
    
        })
    </script>
    </body>
    </html>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题