Groww - making search results clickable

groww-search-clickable.js

/**
 * Handles changes on the input element with id 'sp23Input' and
 * the input element with class 'se55Input'. Updates specific DOM 
 * elements based on the data found in localStorage.
 */
try {
    document.getElementById('sp23Input').addEventListener('change', handleInputChange); // input value
    document.querySelector('.se55Input').addEventListener('change', handleInputChange); // drop down value

    /**
     * Event handler for the 'change' event on the input elements.
     * Retrieves stored data from localStorage, searches for matching items,
     * and replaces certain DOM elements with anchor tags linking to new URLs.
     *
     * @param {Event} event - The change event triggered by the input.
     */
    function handleInputChange(event) {
        // Prefix for localStorage key
        const PREFIX = "OTHERS$$%&sp23";

        // Get the value from the 'sp23Input' or 'se55Input' element
        const inputValue = document.getElementById('sp23Input').value;

        // Get the search type value from the 'se55Input' element and replace underscores with dashes
        const searchType = document.querySelector('.se55Input').value.replaceAll('_', '-');

        // Construct the key to access localStorage
        const localStorageKey = PREFIX + inputValue + searchType;

        // Retrieve the corresponding value from localStorage
        const localStorageValue = localStorage.getItem(localStorageKey);

        // Parse the JSON string from localStorage into an array of objects
        const localStorageValueArray = JSON.parse(localStorageValue);

        // Get all the relevant DOM elements to be modified
        document.querySelectorAll('div.sp23SuggestionUi:nth-child(2) > div > div.left.bodyLarge').forEach(domElement => {
            // Find the matching object in the localStorage array based on the innerText of the DOM element
            const matchingItem = localStorageValueArray.find(item => item.title === domElement.innerText);

            // Check if matchingItem is found before proceeding
            if (matchingItem) {
                // Construct the URL based on the matching object's entity_type and search_id
                const itemUrl = `${(matchingItem.entity_type).toLowerCase()}/${matchingItem.search_id}`;

                // Create a new anchor element
                const anchorElement = document.createElement('a');
                anchorElement.href = itemUrl; // Set the URL as the anchor's href
                anchorElement.target = '_blank'; // Open the link in a new tab

                // Clone the current DOM element (to preserve styles/content) and append it to the anchor element
                const clonedElement = domElement.cloneNode(true);
                anchorElement.appendChild(clonedElement);

                // Replace the original DOM element with the anchor element
                domElement.parentElement.replaceChild(anchorElement, domElement);
            }
        });
    }

} catch (error) {
    console.error("An error occurred:", error);
}