JS snippet to pick elements and extract text and links

selectr.js

(function () {
    var self = this;
    
    self.version = '1.2';
    
    self.els = {};
    
    self.utils = {};
    
    self.utils.addEvent = function (el, evname, f, capture) {
        if ( typeof capture !== 'undefined' ) {
            el.addEventListener(evname, f, capture);
        } else {
            el.addEventListener(evname, f);
        }
    };
    
    self.utils.removeEvent = function (el, evname, f, capture) {
        if ( typeof capture !== 'undefined' ) {
            el.removeEventListener(evname, f, capture);
        } else {
            el.removeEventListener(evname, f);
        }
    };
    
    self.utils.preventEvent = function (ev) {
        ev.preventDefault();
        ev.stopPropagation();
    };
    
    self.utils.cssTagClass = function (el) {
        var tag = el.tagName;
        var classes = '';
        if ( el.getAttribute('class') ) {
            classes = '.' + el.getAttribute('class').replace(/^\s+|\s+$/g, '').replace(/\s+/g, '.');
        }
        
        return tag + classes;
    };
    
    self.scroll = function () {
        var scrolling = false;
        
        var startScroll = function () {
            scrolling = true;
            window.scrollTo(0, document.body.scrollHeight);
        };
        var stopScroll = function () {
            if ( !scrolling ) {
                return;
            }
            clearInterval(kill_id);
            self.utils.removeEvent(window, 'click', stopScroll);
            scrolling = false;
        };
        
        var kill_id = setInterval(startScroll, 500);
        
        self.utils.addEvent(window, 'click', stopScroll);
    };
    
    self.pick = function () {
        var capture = function (ev) {
            self.utils.preventEvent(ev);

            var elements = [];
            var el = ev.target;
            elements.push(self.utils.cssTagClass(el));
            while ( el.parentNode && el.parentNode.tagName !== 'HTML' ) {
                el = el.parentNode;
                elements.push(self.utils.cssTagClass(el));
            }
            
            var selector = [];
            for ( var i = elements.length - 1; i >= 0; i-- ) {
                selector.push(elements[i]);
            }
            
            if ( ev.ctrlKey || ev.shiftKey ) {
                if ( self.els.txt_css.value.trim() === '' ) {
                    self.els.txt_css.value = selector.join(' > ');
                } else {
                    self.els.txt_css.value += ', ' + selector.join(' > ');
                }
            } else {
                self.els.txt_css.value = selector.join(' > ');
            }
            self.update();
            
            endCapturing();
        };

        var endCapturing = function () {
            self.utils.removeEvent(document, 'click', capture, true);
            document.body.style.cursor = 'inherit';
        };
        
        self.utils.addEvent(document, 'click', capture, true);
        document.body.style.cursor = 'crosshair !important';
    };

    self.ui = {};
    
    self.ui.init = function () {
        var panel_styles = {
            "position":        'fixed',
            "zIndex":          '1000',
            "top":             '0',
            "left":            '0',
            "right":           '0',
            "height":          '25em',
            "padding":         '1em',
            "boxShadow":       'dimgrey 0 0 .25em 0',
            "backgroundColor": '#eee'
        };
        var panel_contents = [
            ['<p style="font-size: 200%; margin-bottom:.5em;"><b>Selectr v' + version + '</b></p>'],
            ['<p style="margin-bottom:.5em;">'],
            ['CSS selector: <input id="selectr-input" size="120" style="border:1px solid grey;">'],
            ['<br>'],
            ['<button id="selectr-picker">Pick an element!</button> Hint: hold Ctrl key to add to current selection.'],
            ['<button id="selectr-scroll">Scroll to bottom</button> (Until you click on the page.)'],
            ['</p>'],
            ['<p><textarea id="selectr-results" rows="12" style="width:98%;"></textarea></p>']
        ];
        var panel = document.createElement('div');
        for ( var prop in panel_styles ) {
            panel.style[prop] = panel_styles[prop];
        }
        panel.innerHTML = panel_contents.join("\n");
        
        var body = document.body;
        body.style.paddingTop = '28em';
        body.style.position = 'relative';
        body.insertBefore(panel, body.childNodes[0]);

        self.els.txt_css =     document.getElementById('selectr-input');
        self.els.txt_results = document.getElementById('selectr-results');
        
        var btn_picker =  document.getElementById('selectr-picker');
        var btn_scroll =  document.getElementById('selectr-scroll');
        
        self.utils.addEvent(self.els.txt_css, 'keyup', self.update);
        self.utils.addEvent(btn_picker, 'click', self.pick);
        self.utils.addEvent(btn_scroll, 'click', self.scroll);
    };
    
    self.ui._current_selection = false;

    self.ui.highlight = function (els) {
        self.ui.unhighlight();
        els.forEach( el => {
            el.setAttribute('old-border', el.style.border);
            el.style.border = '2px solid red';
        } );
        self.ui._current_selection = els;
    };
    
    self.ui.unhighlight = function () {
        if ( self.ui._current_selection === false ) {
            return;
        }
        self.ui._current_selection.forEach( el => el.style.border = el.getAttribute('old-border') );
        self.ui._current_selection = false;
    };
    
    self.update = function () {
        var value = self.els.txt_css.value.replace(/^\s+|\s+$/, '');
        
        if ( value === '' ) {
            self.els.txt_css.style.border = '1px solid grey';
            self.ui.unhighlight();
            return;
        }
        
        var els = document.querySelectorAll(value);
        
        if ( els.length == 0 ) {
            self.els.txt_css.style.border = '1px solid red';
            self.ui.unhighlight();
            return;
        }
        
        self.els.txt_css.style.border = '1px solid grey';
        self.ui.highlight(els);
        
        var data = [], row;
        els.forEach( (el, idx) => {
            row = [el.innerText.replace(/\s+/g, ' ')];
            if ( el.getAttribute('href') ) {
                row.push(el.href);
            }
            data.push(row);
        });
        
        self.els.txt_results.value = data.map( x => x.join("\t") ).join("\n") + "\n";
    };
    
    self.ui.init();
})();