忽略HTML標記以突出顯示匹配的單詞

Question

我想在突出顯示與搜索輸入匹配的單詞后，用新模板內容替換HTML模板內容。

如代碼段所示，我使用了一個突出顯示過濾器，通過添加&zwj;<span class="highlighted">$1&zwj;</span> ，將黃色背景添加到匹配的單詞中。

問題一

問題是，有時突出顯示不會執行，我無法弄清楚為什么，例如，在搜索accountin ，它會突出顯示，但在搜索accounting ，則不會突出顯示。

僅當匹配的單詞位於某些子標記內（例如<bold>和<tag>等）時，才會出現此問題，您可以嘗試搜索accounting然后您將看到我的意思。 為什么會這樣？ 以及如何解決它？

問題二

在HTML中，我使用的材質圖標如<md-icon class="material-icons ltr">folder</md-icon> ，搜索folder時，此圖標上將突出顯示。

即使我使用像<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 = '&zwj;<span class="highlighted">' + searchSrting[i] + '&zwj;</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 (eg 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 (eg 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> 

Answer 1

首先，我很抱歉快速測試答案。

這是你的答案：

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>案例看起來像這個正則表達式不會幫助你。 如果你想在項目中使用正則表達式執行此操作，可以在正則表達式中添加所有案例。

但像這樣的正則表達式中的特定用法...我認為這不是最好的方法。

因為; 將來，如果您決定更改圖標庫。 你也必須改變你的正則表達式。 而且正則表達式並不是第一個看起來可以理解的語言。 最后，這將是一個非常非常糟糕的隱藏業務。

我希望你能找到你想要的東西。