User:Chew/scripts/HighlightQuotes.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

// Function to highlight text within quotes
function highlightQuotes(element) {
    const regex = /"(.*?)"/g;
    $(element).contents().each(function () {
        if (this.nodeType === Node.TEXT_NODE) { // Check if it's a text node
            const highlightedText = $(this).text().replace(regex, '<span style="background-color: yellow;">"$1"</span>');
            $(this).replaceWith(highlightedText); // Replace the text node with highlighted text
        } else if (this.nodeType === Node.ELEMENT_NODE) { // Recursively process child elements
            highlightQuotes(this);
        }
    });
}

// Function to add the "Highlight Quotes" link to the sidebar
function addHighlightQuotesLink() {
    const theme = mw.config.get('skin');

    let $targetUl;

    // Find the target <ul> element using jQuery
    switch (theme) {
        case "timeless":
        case "vector-2022":
            $targetUl = $('#site-tools .sidebar-inner .mw-portlet .mw-portlet-body ul');
            break;

        case "vector":
        case "monobook":
            $targetUl = $("#p-tb div ul");
            break;

        default:
            console.warn('Unsupported theme!');
            return;
    }

    if (!$targetUl.length) { // Check if the element exists
        console.error('Target <ul> not found!');
        console.log($targetUl);
        return;
    }

    // Create the new <li> element with an <a> tag inside
    const $newLi = $('<li>', {
        class: 'mw-list-item mw-list-item-js',
        id: 'highlight-quotes'
    }).append(
        $('<a>', {
            text: 'Highlight Quotes', // Link text
            href: '#', // Placeholder href
            css: {cursor: 'pointer'} // Ensure the cursor changes to a pointer
        }).on('click', function (event) {
            event.preventDefault(); // Prevent the default link behavior
            const $bodyContent = $('#bodyContent'); // Use #bodyContent as the selector
            if ($bodyContent.length) {
                highlightQuotes($bodyContent[0]); // Pass the raw DOM element to the function
            }
        })
    );

    // Append the <li> to the <ul>
    $targetUl.append($newLi);
}

// Use jQuery to run the function when the page is completely ready
$(function () {
    addHighlightQuotesLink();
});