写了个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再编译一下。
满意请采纳。