Skip HTML tags to add highlight to content only, not to HTML tags

Question

I want to replace HTML template content with new one after highlighting the words those match the search input.

As shown in the snippet, I am using highlight filter that adds yellow background to matched words by adding ‍$1‍ .

The problem is that sometimes this is added inside HTML tags if there is matched string in it. for example: In the HTML, there is tag error_outline. if the search string is ma, then the tag will become ma‍terial-icons">error_outline.

How can I skip HTML tags, so the highlighting will be applied to the content only, not to HTML tags?

Try to input m, and you can see some HTML tags appear, like

PS: if possible, is there is a way to skip error_outline also in case of error_outline, because it's referred to material icons.

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'),
                            '$1')
                  }
               return $sce.trustAsHtml(text)
           }
      }
})
.controller("main", function($scope){ 
  $scope.searchString="";
  $scope.content=" User Management
User Managementperm_identitypublished by: Ha ba        folderUser Managementpublishpublished: 25 May 2016
In AMe, you can manage multiple bank accounts 

            Introduction      The Sales Planner is a useful step-by-step guide created to help you implement your sales funnel    
    Go to Accounting ‣ Configuration ‣ Bank Accounts and click on the Bank item. Edit it        error_outline        AMeSCom will detect the bank account type (e.g. IBAN) to allow some payment method like SEPA.        

            Set up your first sales team        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.    

                Set up incoming email to generate opportunities        In Odoo CRM, one way to generate opportunities into your sales team is to create a generic email address as a trigger.    ";
})

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}









  search
  
  

    User Management
    

    
        User Management
    
    
        perm_identitypublished by: Ha ba
        folderUser Management
        publishpublished: 25 May 2016
    
    

    In AMe, you can manage multiple bank accounts
    


    
        Introduction
    
    The Sales Planner is a useful step-by-step guide created to help you implement your sales funnel
    

    Go to Accounting ‣ Configuration ‣ Bank Accounts and click on the Bank item. Edit it
    error_outline
        AMeSCom will detect the bank account type (e.g. IBAN) to allow some payment method like SEPA.
    
    


    
        Set up your first sales team
    
    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.


    


    
        Set up incoming email to generate opportunities
    
    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

G&#252;ven Altuntaş · Accepted Answer

I have edited my answer because of some mistake

var text = "some text  some text to";
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)

Skip HTML tags to add highlight to content only, not to HTML tags

Answers (2)

Related Questions