javascript - angular 实现输入查找并高亮显示
本文介绍了javascript - 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>感谢感谢！！！
解决方案
过滤器没改你的，只是调整了点控制器跟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>这篇关于javascript - angular 实现输入查找并高亮显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
