JSFiddle - React, Tailwind, and code Playground

JavaScript

arr = ["AAAA1", "AAAA3", "ABAA2", "AAAA10", "AAAA100", "BBB2", "BBB10", "BBAA3", "BBB2AA"];

function addLeadingZero(num, len) {
    num = num.toString();
    while (num.length < len) {
        num = "0" + num;
    }
    return num;
}

function fixStringWithNumbers(str1,str2) {
    var numPattern = /[0-9]+/ig;

    var matchNum1 = str1.match(numPattern);
    var matchNum2 = str2.match(numPattern);
    
    var maxNum1 = matchNum1 == null ? 0 : Math.max.apply(window, matchNum1);
    var maxNum2 = matchNum2 == null ? 0 : Math.max.apply(window, matchNum2);

    var maxNum = maxNum1 > maxNum2 ? maxNum1 : maxNum2;
    
    var len = (maxNum + "").length;
    if (matchNum1 != null) {
        for (var i = 0; i < matchNum1.length; i++) {
            var regPattern1 = "^" + matchNum1[i] + "|(.)" + matchNum1[i];
            str1 = str1.replace(new RegExp(regPattern1), "$1" + addLeadingZero(matchNum1[i], len));
        }
    }

    if (matchNum2 != null) {
        for (var i = 0; i < matchNum2.length; i++) {
            var regPattern2 = "^" + matchNum2[i] + "|(.)" + matchNum2[i];
            str2 = str2.replace(new RegExp(regPattern2), "$1" + addLeadingZero(matchNum2[i], len));
        }
    }
    return [str1,str2];
}
arr.sort(function(a, b) {
    var fixedTexts = fixStringWithNumbers(a, b);
    var aText = fixedTexts[0];
    var bText = fixedTexts[1];
    if (aText > bText) return 1;
    else if (aText < bText) return -1;
    else return 0
});
alert(arr);