HTMLタグをスキップして、ハイライトをHTMLタグではなく、コンテンツにのみ追加します。

Question

検索入力と一致する単語をハイライトした後、HTMLテンプレートコンテンツを新しいものに置き換えます。

スニペットに示されているように、&zwj;<span class="highlighted">$1&zwj;</span>を追加して、一致する単語に黄色の背景を追加するフィルタhighlightを使用しています。

HTMLタグ内に一致する文字列があると、この<span>が追加されることがあるという問題があります。例：HTMLには、タグ<md-icon class="material-icons">error_outline</md-icon>があります。検索文字列がmaの場合、タグは<md-icon class="&zwj;<span class="highlighted">ma&zwj;</span>terial-icons">error_outline</md-icon>になります。

どのようにHTMLタグをスキップすることができるので、ハイライトはHTMLタグではなくコンテンツのみに適用されますか？

入力mしよう、とあなたは<module>

PSのように、いくつかのHTMLタグが表示され見ることができます：可能であれば、それは材料のアイコンと呼ばれますので、 <md-icon class="material-icons">error_outline</md-icon>の場合にも、error_outlineをスキップする方法があるあります。

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>

Answer 1

私は、HTMLを解析するために正規表現を使用してはならないので、いくつかのミス

var text = "<div>some text <span class='text'> some text</span> to</div>"; 
var tag = 'text'; 
var tagvalue = "here is result"; 

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; 
}; 
mapText(text,tag,tagvalue) 

Answer 2

の私の答えを編集しました。

なぜここに検索：Using regular expressions to parse HTML: why not?

よろしく、

エリック