0
我想在突出显示与搜索输入相匹配的单词之后用新内容替换HTML模板内容。跳过HTML标签，只将内容添加到内容中，而不添加到HTML标签
如片段所示，我使用的highlight过滤器通过添加‍<span class="highlighted">$1‍</span>将黄色背景添加到匹配的单词中。
问题是，有时候这个<span>被添加到HTML标签内部，如果其中有匹配的字符串的话。例如：在HTML中，有标签<md-icon class="material-icons">error_outline</md-icon>。如果搜索字符串是ma，那么标签将变为<md-icon class="‍<span class="highlighted">ma‍</span>terial-icons">error_outline</md-icon>。
如何跳过HTML标记，因此突出显示将仅应用于内容，而不应用于HTML标记？
尝试输入m，你可以看到一些HTML标记出现，如<module>
PS：如果可能的话，是没有办法跳过error_outline也是在 <md-icon class="material-icons">error_outline</md-icon>情况下，因为它是指材料的图标。
angular.module("myApp", ["ngMaterial"])
.filter('highlight', function ($sce) {
return function (text, searchSrting) {
if(searchSrting){
searchSrting = searchSrting.split(/\s+/);
if(typeof text !== "undefined")
for (var i = 0; i < searchSrting.length; i++) {
text = text.replace(new RegExp('(' + searchSrting[i] + ')', 'gi'),
'<span class="highlighted">$1</span>')
}
return $sce.trustAsHtml(text)
}
}
})
.controller("main", function($scope){
$scope.searchString="";
$scope.content="<module> <ti-tle>User Management</ti-tle><br><tag-group><tag>User Management</tag></tag-group><info-group><info><md-icon class='material-icons ltr'>perm_identity</md-icon>published by: Ha ba</info> <info><md-icon class='material-icons ltr'>folder</md-icon>User Management</info><info><md-icon class='material-icons ltr'>publish</md-icon>published: 25 May 2016</info></info-group><hr>In <bold>AMe</bold>, you can manage multiple bank accounts <br><br> <sub-title> Introduction </sub-title> The Sales Planner is a useful step-by-step guide created to help you implement your sales funnel <br> Go to <bold>Accounting</bold> ‣ <bold>Configuration</bold> ‣ <bold>Bank Accounts</bold> and click on the Bank item. Edit it <note><md-icon class='material-icons'>error_outline</md-icon> AMeSCom will detect the bank account type (e.g. IBAN) to allow some payment method like SEPA. </note> <br><br> <sub-title> Set up your first sales team </sub-title> For example, if within your company Tim is selling products and John is selling maintenance contracts, they will be assigned to different teams and will only receive opportunities that make sense to them. <br><br> <sub-title> Set up incoming email to generate opportunities </sub-title> In Odoo CRM, one way to generate opportunities into your sales team is to create a generic email address as a trigger. </module>";
})module{
font-size: 14px;
color: #484848;
}
ti-tle {
font-size: x-large;
color: rgb(50, 118, 177);
display: block;
font-weight: bold;
}
tag-group{
display: block;
line-height: 3;
}
tag{
background-color: #daebe8;
padding:2px 6px;
font-weight: bold;
font-size: 12px;
margin: 2px;
border-radius: 4px;
cursor: pointer;
color: #667292;
}
tag:hover{
background-color: #87bdd8;
}
info-group{display: block}
info{
color: gray;
margin: 4px;
font-size: 12px;
}
sub-title{
font-weight: bold;
font-size: 18px;
display: block;
line-height: 2;
}
img{
display: block;
margin: 30px 0;
width: 100%;
}
bold{
font-weight: bold;
}
note{
background-color: antiquewhite;
}
.highlighted {
background: yellow;
}
md-icon{direction: ltr}<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-aria.js"></script>
<script src="//rawgit.com/angular/bower-material/master/angular-material.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.3.7/angular-material.css"/>
<div ng-app="myApp">
<div ng-controller="main">
<label>search</label>
<input ng-model="searchString"/>
<div ng-if="!searchString">
<module>
<ti-tle>User Management</ti-tle>
<br>
<tag-group>
<tag>User Management</tag>
</tag-group>
<info-group>
<info><md-icon class="material-icons ltr">perm_identity</md-icon>published by: Ha ba</info>
<info><md-icon class="material-icons ltr">folder</md-icon>User Management</info>
<info><md-icon class="material-icons ltr">publish</md-icon>published: 25 May 2016</info>
</info-group>
<hr>
In <bold>AMe</bold>, you can manage multiple bank accounts
<br><br>
<sub-title>
Introduction
</sub-title>
The Sales Planner is a useful step-by-step guide created to help you implement your sales funnel
<br>
Go to <bold>Accounting</bold> ‣ <bold>Configuration</bold> ‣ <bold>Bank Accounts</bold> and click on the Bank item. Edit it
<note><md-icon class="material-icons">error_outline</md-icon>
AMeSCom will detect the bank account type (e.g. IBAN) to allow some payment method like SEPA.
</note>
<br><br>
<sub-title>
Set up your first sales team
</sub-title>
For example, if within your company Tim is selling products and John is selling maintenance contracts, they will be assigned to different teams and will only receive opportunities that make sense to them.
<br><br>
<sub-title>
Set up incoming email to generate opportunities
</sub-title>
In Odoo CRM, one way to generate opportunities into your sales team is to create a generic email address as a trigger. For example, if
</module>
</div>
<div ng-if="searchString" ng-bind-html="content | highlight:searchString"></div>
</div>
</div>
貌似之间>和<字符不含< and >字符是你的内容。尝试仅替换该内容。 /> [^><'这里是你的正则表达式'] +
我试图只获取内容，但是如何在相同的HTML标签中重新查看它？ ，我不擅长正则表达式。 –
不使用例如什么点[mark.js]（https://markjs.io）？ – dude