MediaWiki:Gadget-highlight-search.js

console.log("Loading highlight-search");

var urlParams = new URLSearchParams(window.location.search);
var searchString = decodeURIComponent(urlParams.get('searchterm')).replace(/\+/g, ' ');
var timer;
if (searchString !== 'null' && searchString !== '') {
	searchInPage(searchString, false);
}

// Adding Ctrl + F functionality to wikimedica search box
$('#searchInput').on('input', function() {
	clearTimeout(timer);
    timer = setTimeout(searchInPage.bind(null, $('#searchInput').val(), true), 750)
    //searchInPage($('#searchInput').val(), true);
});

// Function which highlights a search term, scrolls to first result and open collapsed sections
function searchInPage(searchString, scrolled){
	// Clearing previous highlights
    $('mark').contents().each(function(index, mark){
        $(mark).unwrap();
        $(mark).parent()[0].normalize();
    });
    $('mark').contents().unwrap(); // Just making sure
    
    if (searchString && searchString.length > 2){
	    // Extracting regular expression from search input
        var search = searchString.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); //https://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex
        var re = new RegExp(search, 'gi'); 
        
        // Adding mark to matching words
        $( '#content' ).each(function() {
            $( this ).find(':not(.references):not(.references *)').andSelf().contents().filter( function () {
                        return this.nodeType === 3
                    }).each( function () {
                var output;
    
                output = this.nodeValue.replace( re, '<mark>$&</mark>');
                if ( output !== this.nodeValue ) {
                    
                    var outputNode = $( this ).wrap( "<p></p>" ).parent().html( output ).contents().unwrap();
					
					// Checking if first result has been scrolled
                    if (scrolled === false){
                        scrolled = true;
                        // Scrolling to first result
                        $('html, body').animate({ scrollTop: $($(outputNode[0].parentElement).find('mark')).offset().top - $(window).height()/2}, 1000); 
                    }
                    
                    // Checking if result is collapsed
                    var outputNodeParent = $(outputNode[0]).parentsUntil('.mw-parser-output') || $(outputNode[0]);
                    if (outputNodeParent.hasClass('collapsed')){
                    	// If result is collapsed, open section
                    	outputNodeParent.prevUntil('.collapse').closest('h2').last().find('.collapse').click();
                    }
                }
               
            });
        });
    }
}