JSFiddle - React, Tailwind, and code Playground

HTML

a: <input id="a" oninput="update();"><br>
b: <input id="b" oninput="update();"><br>
output: <span id="out"></span>

JavaScript

function update() {
    document.getElementById("out").innerHTML = match(document.getElementById("a").value, document.getElementById("b").value);
}

function canBeEmpty(s) {
    if (s.length % 2 == 1)
        return false;
    for (let i = 1; i < s.length; i += 2)
        if (s[i] != "*")
            return false;
    return true;
}

function match(a, b) {
    if (a.length == 0 || b.length == 0)
        return canBeEmpty(a) && canBeEmpty(b);
    let x = 0, y = 0;
    // process characters up to the next star
    while ((x + 1 == a.length || a[x + 1] != "*") &&
           (y + 1 == b.length || b[y + 1] != "*")) {
        if (a[x] != b[y] && a[x] != "." && b[y] != ".")
            return false;
        x++; y++;
        if (x == a.length || y == b.length)
            return canBeEmpty(a.substr(x)) && canBeEmpty(b.substr(y));
    }
    if (x + 1 < a.length && y + 1 < b.length && a[x + 1] == "*" && b[y + 1] == "*")
        // star coming in both strings
        return match(a.substr(x + 2), b.substr(y)) || // try skip in a
               match(a.substr(x), b.substr(y + 2)); // try skip in b
    else if (x + 1 < a.length && a[x + 1] == "*") // star coming in a, but not in b
        return match(a.substr(x + 2), b.substr(y)) || // try skip * in a
               ((a[x] == "." || b[y] == "." || a[x] == b[y]) && // if chars matching
                      match(a.substr(x), b.substr(y + 1))); // try skip char in b
    else // star coming in b, but not in a
        return match(a.substr(x), b.substr(y + 2)) || // try skip * in b
               ((a[x] == "." || b[y] == "." || a[x] == b[y]) && // if chars matching
                      match(a.substr(x + 1), b.substr(y))); // try skip char in a
}