JSFiddle - React, Tailwind, and code Playground

by Marcus Ekwall

HTML

<h1>Test</h1>
<h2>Test</h2>
<h3>Test</h3>

CSS

body, html {
    font-size: 1em;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 180%;
}

h3 {
    font-size: 20pt;
}

JavaScript

(function($){
    $.fn.filterByFontSize = function(size){
        // Local scope vars
        var relative = false,
            matches = size
                .toString()
                .match(/^\d+(?:\.\d+)?(pt|em|%)$/i);
        
        // Parse size
        size = parseFloat(size, 10);
        
        // Check matches
        if (matches !== null) {
            switch (matches[1]) { 
                case "pt":
                    size = size*96/72;
                break;
                case "em":
                    relative = true;
                break;
                case "%":
                    relative = true;
                    size = (size/100)+0.01;
                break;
            }
        }
        
        // Filter elements accordingly
        return this.filter(function(){
            var $this = $(this),
                thisSize = parseInt(
                    $this.css("font-size"), 10);
            if (relative) {
                var parent = $this.parent();
                if (parent[0] === document) {
                    parent =  $(document.body);
                }
                var parentSize = parseInt(
                        parent.css("font-size"), 10);
                return parentSize*size < thisSize;
            } else {
                return thisSize > size;
            }
        });
    
    };
})(jQuery);

console.log($('h1,h2,h3').filterByFontSize("2.1em"));
console.log($('h1,h2,h3').filterByFontSize("181%"));
console.log($('h1,h2,h3').filterByFontSize("21pt"));
console.log($('h1,h2,h3').filterByFontSize("14px"));
console.log($('h1,h2,h3').filterByFontSize(11));