在突出显示与搜索输入匹配的单词后，我想用新模板替换HTML模板内容。
如摘要所示，我正在使用高亮过滤器，该过滤器通过添加来向匹配的单词添加黄色背景‍<span class="highlighted">$1‍</span>。
问题一
问题是，有时突出显示无法执行，并且我不知道为什么，例如，当搜索时accountin，则突出显示，但是当搜索时accounting，却未突出显示。
仅当匹配的单词在诸如<bold>和的某些子标签中时，才会出现此问题<tag>，您可以尝试搜索，accounting然后您会明白我的意思。为什么会这样？以及如何解决？
问题二
在HTML中，我使用的是诸如的实质性图标<md-icon class="material-icons ltr">folder</md-icon>，并且当搜索时folder，突出显示将出现在该图标上。
即使我像svg一样使用图标<md-icon md-svg-src="path/user.svg"></md-icon>，也会发生相同的问题。
那么，有什么办法可以避免这种情况？
angular.module("myApp", ["ngMaterial"])
.filter('highlight', function ($sce) {
function mapText(text,tag,tagvalue){
var reg = new RegExp("[\>][^\<\>.]*"+tag+"[^\<\>.][\<]*","gi");
var result = text.replace(reg,function(item,exp){
var subRegex = new RegExp(tag,"gi");
return item.replace(subRegex,tagvalue);
});
return result;
}
return function (text, searchSrting) {
if(searchSrting){
searchSrting = searchSrting.split(/\s+/);
if(typeof text !== "undefined") {
for (var i = 0; i < searchSrting.length; i++) {
if(searchSrting[i]==""){
continue;
}
else{
var tagvalue = '‍<span class="highlighted">' + searchSrting[i] + '‍</span>';
text = mapText(text, searchSrting[i], tagvalue);
}
}
}
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 Accounting</sub-title> The Sales Planner is a useful step-by-step guide created to help you implement your sales funnel <br>Accounting 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> 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 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 href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<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 Accounting
</sub-title>
The Sales Planner is a useful step-by-step guide created to help you implement your sales funnel
<br>
Accounting
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>
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 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>首先，对于快速测试的答案，我感到抱歉。
这是您的答案：
var reg = new RegExp("[\>][^\<\>.]*"+tag+"[^\<\>.][\<]*","gi");
在此行中，正则表达式搜索任何字符，但不搜索'> <'。这就是为什么您的代码工作不正确正确的代码在这里：
var reg = new RegExp("[\>][^\<\>.]*"+tag+"[^\<\>.]*[\<]*","gi");
第2部分：在此代码中，您将一个接一个地替换单词。因此，当您替换一个单词为第二个单词时，该单词正则表达式将不匹配。例子：
我们的重点词是火和消防员。
var text = "<div>fireman has killed fire</div>";
在第一个循环之后，文本将如下所示：
text = "<div><highlight>fire</highlight>man has killed <highlight>fire</highlight></div>";
因此我们的正则表达式在此新文本中将与第二个单词不匹配。
但是如果我们按文本长度对数组进行排序。这个问题将得到解决。
在<md-icon class="material-icons ltr">folder</md-icon>情况看起来像这样的正则表达式不会帮助你。如果要在项目中使用正则表达式来执行此操作，则可以在正则表达式中添加所有案例。
但是像这样在正则表达式中的特殊用法……我认为这不是最好的方法。
因为; 将来如果您决定更改图标库。您也必须更改您的正则表达式。正则表达式不是首先看起来可以理解的语言。最后，这将是非常非常糟糕的隐藏业务。
希望您能找到想要的东西。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句