jQuery如何通过通配符匹配移除元素上指定前缀的CSS类

• jQuery v3.6.0
• Bootstrap 5.1.3

• 页面包含一个或多个手机号输入字段，使用Bootstrap框架在每个输入字段前预置输入组，输入组内包含国家国旗图片，图片需要根据用户在其他字段选择的国家动态切换显示。
• 展示国旗的span元素共设置两类样式：基础类flag、国家专属类。每个国家专属类对应CSS中预定义的国旗精灵图规则，所有国家专属类名均以country_为前缀，后缀为ISO-3166标准国家代码，例如country_us代表美国、country_de代表德国、country_fr代表法国。
• 实现动态切换时，需要通过通配符匹配仅移除所有国家专属类，不需要额外在代码中记录当前生效的国旗类名。
• jQuery原生removeClass()方法默认仅支持移除明确传入的指定类名，官方没有提供直接传入通配符、正则表达式匹配移除类的用法。

手机号输入字段HTML结构 #

<div id="phone_group" class="form-group">
    <label for="phone" class="control-label">Phone Number*</label>
    <div class="input-group">
        <span class="input-group-text">
            <span class="flag country_us">&nbsp;</span>
        </span>
        <input id="phone" name="phone" type="tel" class="form-control" required>
    </div>
</div>

类名匹配正则（已验证可用） #

/^country_\S+/g

国旗切换函数（待补全） #

const setFlagIcon = function( countryID ) {
    $( '.flag' ).removeClass( '待补全的匹配逻辑' );
    $( '.flag' ).addClass( 'country_' + countryID );
}

切换触发逻辑 #

$( '#country' ).change( function() {        // 用户切换国家下拉选项时触发           
    lookupCountry( $( '#country' ).val() ); // 发起AJAX请求获取对应国家ID（存入全局变量countryID）
    setFlagIcon( countryID );               // 执行国旗图标切换
});

jQuery的removeClass()支持传入回调函数作为参数，回调函数会遍历每个选中元素的类列表，返回值为需要移除的、空格分隔的类名字符串，直接补全逻辑即可：

const setFlagIcon = function( countryID ) {
    $('.flag').removeClass(function(_, classList) {
        // 匹配所有位置的country_前缀类，拼接后返回给removeClass移除
        return (classList.match(/(^|\s)country_\S+/g) || []).join(' ');
    });
    $('.flag').addClass('country_' + countryID);
}

说明：对原有正则做了小调整，新增(^|\s)匹配前缀，避免出现类名是xxxcountry_xx时被误删的问题，同时可以匹配class属性中任意位置的country_前缀类，不会因为目标类不在class属性第一位就匹配失败。

内容的提问来源于stack exchange，提问作者unpocoloco