Edit in JSFiddle

var COUNTER = 0;

let nums = `
<PUT TEST CASE HERE. DO NOT INCLUDE DIMENTION NUMBERS - JUST THE ISLANDS>
`;


/**
Symbols:
    - Water => ~
    - outside water after paint => %
    - outside island after paint  => @ 
**/


// make into matrix of elements
let map = nums.split("\n").map(n=>n.split(""));
print(map);

// 1. Start of first water symbol and recursively paint all water symbols (up/d/r/l)
paintWater(0,0); // works ^

print(map);

// 2. Go through all elements. If there is a star (piece of land: *) that touches the outside water, `%`, then recursively paint that piece of land
for (let i = 0; i < map.length; i++) {
    for (let k = 0; k < map[0].length; k++) {
        // if the current space is a land piece
        if (map[i][k] == '*') {
            // if any space around it (u/d/l/r) is an outside water piece (%), then recursively paint that piece of land
            if (pieceAroundIsOutsideWater(i, k)) {
                paintLand(i, k);
            }
        }
    }
}

print(map);


// 3. Go back through all elements and if it is a land piece, then it is an island inside an island, so paint it recursively and add 1 to the counter
for (let i = 0; i < map.length; i++) {
    for (let k = 0; k < map[0].length; k++) {
        if (map[i][k] == '*') {
            COUNTER++;
            paintLand(i, k);
        }
    }
}




// print out answer
console.log(`# of Island in island: ${COUNTER}`);


/********************************* FUNCTIONS *****************************************/
function print( m) {
    //console.log(message);
    for (let a of m) {
        let s = "";
        for (let x of a) {
            s += `${x}`
        }
        console.log(s)
    }
    console.log('\n')
}


// water will be painted as a percentage symbol `%`
function paintWater(x, y) {
    // if out of bounds end
    if (x >= map.length || x < 0 || y >= map[0].length || y < 0) {
        return;
    }

    // if the current element is not a water, end
    if (map[x][y] != '~') {
        return;
    }

    // set current to be the symbol
    map[x][y] = "%";

    // send off in all directions (up/down/right/left)
    paintWater(x + 1, y);
    paintWater(x - 1, y);
    paintWater(x, y + 1);
    paintWater(x, y - 1);

    // diagonally
    paintWater(x + 1, y + 1);
    paintWater(x + 1, y - 1);
    paintWater(x - 1, y + 1);
    paintWater(x - 1, y - 1);
}


function paintLand(x, y) {
    //console.log(`In paintLand: x = ${x}, y = ${y}`);
    // if out of bounds, end
    if (x >= map.length || x < 0 || y >= map[0].length || y < 0) {
        //console.log(`(${x}, ${y}) == ${map[x][y]}`);
        return;
    }

    // if the current element is not a land (*), end
    if (map[x][y] != "*") {
        //console.log(`Not the right symbol: (${x}, ${y}) == ${map[x][y]}`);
        return;
    }

    // set current to be the symbol
    map[x][y] = "@";

    // send off in all directions (up/down/right/left)
    paintLand(x + 1, y);
    paintLand(x - 1, y);
    paintLand(x, y + 1);
    paintLand(x, y - 1);
}



function pieceAroundIsOutsideWater(x, y) {
    if (isInMap(x + 1, y) && map[x + 1][y] == "%") return true;
    if (isInMap(x - 1, y) && map[x - 1][y] == "%") return true;
    if (isInMap(x, y + 1) && map[x][y + 1] == "%") return true;
    if (isInMap(x, y - 1) && map[x][y - 1] == "%") return true;

    return false;
}


function isInMap(x, y) {
    return x < map.length && x >= 0 && y < map[0].length && y >= 0;
}