Regex helped needed for angular filter which highlights matching text from html

Question

I have this which works but but the regex is matching with html tags, is there any way I could get it to ignore html tags. Could anyone help me to modify the regex expression so my class is only applied to text and not matching html tags?

angular.module('my.filters')
    .filter('highlight', function ($sce) {
        return function (text, filterPhrase) {
            if (filterPhrase) text = text.replace(new RegExp('(' + filterPhrase + ')', 'gi'), '<span class="quick-find-highlight">$1</span>');
            return $sce.trustAsHtml(text);
        };
    });

It will just be a text string which the user will type in, works sort of like Ctrl + f in the browser. — rtn
– rtn, Commented Mar 25, 2015 at 10:53

jcubic · Accepted Answer · 2015-03-25 11:21:56Z

1

You can try following code, where I split by tags and replace only when string is not a tag.

angular.module('my.filters')
    .filter('highlight', function($sce) {
        return function(text, filterPhrase) {
            if (filterPhrase) {
                var tag_re = /(<\/?[^>]+>)/g;
                var filter_re = new RegExp('(' + filterPhrase + ')', 'gi');
                text = text.split(tag_re).map(function(string) {
                    if (string.match(tag_re)) {
                        return string;
                    } else {
                        return string.replace(filter_re, 
                                              '<span class="quick-find-highlight">$1</span>');
                    }
                }).join('');
            }
            return $sce.trustAsHtml(text);
        };
    });

answered Mar 25, 2015 at 11:21

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Regex helped needed for angular filter which highlights matching text from html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related