Get defined CSS classes by pattern

Question

Is there any possiblity get all defined CSS classes matching a pattern?

For example if you have some CSS rules defined like:

.my-custom-class-one {}
.my-custom-class-two {}
.my-custom-class-three {}

I'd like to have something like:

console.log( getClassNamesByPattern('my-custom-class-*') );

returning a list of the matching classes:

[ 'my-custom-class-one', 'my-custom-class-two', 'my-custom-class-three' ]

There is no markup matching those selectors (yet). Actually that's what i'd like to create...

I thought maybe something like getComputedStyles would do the trick, but since it expects an element, which doesn't exists, it doesn't seem to be of much use...

Are you using jquery on your site? If so, then using a filter might be a solution for you. — Fisch
– Fisch, Commented Aug 23, 2013 at 8:24

Community · Accepted Answer · 2017-05-23 11:56:38Z

2

The following would be a solution:

CSS

.my-custom-class-one {}
.my-custom-class-two {}
.my-custom-class-three {}

JS

function getClassNamesByPattern(pattern) {
    var selectors = {};

    for (var i = 0; i < document.styleSheets.length; i++) {
        var classes = document.styleSheets[i].rules || document.styleSheets[i].cssRules;
        for (var x = 0; x < classes.length; x++) {
            if (undefined !== classes[x].selectorText && null !== classes[x].selectorText.match(new RegExp('\\.' + pattern.replace(/([^\s])\*/, '$1[^ ]+'), 'g'))) {
                selectors[classes[x].selectorText] = classes[x].selectorText;
            }
        }
    }

    return Object.keys(selectors);
}

console.log(getClassNamesByPattern('my-custom-class-*'));

as seen here all css classes in page using js

...wondering how that might perform on pages with lots of style rules, though.

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Aug 22, 2013 at 10:52

gherkins

15.1k7 gold badges47 silver badges74 bronze badges

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

5 Comments

MDEV Over a year ago

I would probably use something like: classes[x].selectorText.match(new RegExp('\\.'+pattern.replace(/([^\s])\*/,'$1[^ ]+'),'g'))

Ilya Streltsyn Over a year ago

I suppose that check for the existence of classes[x].selectorText may be needed, since not all CSSrule subtypes have such property. Otherwise it's the only possible solution to find the CSS rules declared but not used by actual DOM elements, AFAIK.

MDEV Over a year ago

@MarkResølved I've updated my comment as well - was flawed. Might want to change to the new version

André Dion Over a year ago

Shouldn't you also loop through document.styleSheets instead of just checking the first one: document.styleSheets[0]?

gene b. Over a year ago

This fails in Firefox with the error "Operation is Insecure". Firefox prevents cross-domain CSS traversal. If you need to find some custom CSS classes, you may need to restrict yourself to your own CSS, which this solution doesn't do.

Collectives™ on Stack Overflow

Get defined CSS classes by pattern

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related