Snippet of the levenshtein distance calculator top correct a misspelled route - Approach B

leevenshtein-404-approach-b.helper.js

const { distance } = require('fastest-levenshtein')

// Approach B - Using distance which gives us more control in conjunction with a MAX_DISTANCE value

const routes = {
    paymentMethods: 'paymentmethods',
    accountData: 'account-data',
    profile: 'profile',
    privacySettings: 'privacy-settings',
}

// Get the current pathname and remove the leading slash (the pathname property always has a leading slash)
const path = window.location.pathname.substr(1)

// If the current path is not an exact match, we'll use the levenshtein distance calculation to get the closest match
if (!Object.values(routes).includes(path)) {    
    const MAX_DISTANCE = 2
    const closestPathname = (inputPath) => {
        const potentialRoutes = Object.entries(routes)
            .map(([routeKey, route]) => ({ [routeKey]: distance(inputPath, route) }))
            .sort((routeA, routeB) => {
                const distanceA = Object.values(routeA)[0]
                const distanceB = Object.values(routeB)[0]

                if (distanceA < distanceB) {
                    return -1
                } else if (distanceA > distanceB) {
                    return 1
                }
                return 0
            })
            .filter(route => Object.values(route)[0] <= MAX_DISTANCE)
            .map(route => route ? routes[Object.keys(route)[0]] : null)

            return potentialRoutes && potentialRoutes[0]  
    }

    // Option A - Redirect the user instantly
    window.location.href = closestPathname(path)
    
    // Option B - Display a link on the page with the suggested route
    document.querySelector('a.next-best-action').href = `${window.protocol}${window.host}/${closestPathname(path)}`
}