如何修改现有代码将URL中的&amp%3B替换为&以生成正确访问链接

问题原因 #

URL出现&amp%3B异常字符的核心原因是Blade模板的{{ }}输出语法默认会对特殊字符做HTML实体转义：路由生成的原始参数分隔符&会被转义为&，多次转义后就出现了你看到的异常格式。

修改步骤 #

只需修改onRegionClick回调中URL生成的相关代码即可，首先把默认转义的{{ }}语法替换为不转义直接输出的{!! !!}，如果担心还有残留转义字符，可以额外加一层字符串替换做双重保险。

修改后的完整代码 #

var jQuery_1_8_2 = jQuery.noConflict();
$(function () {
    var array = JSON.parse('{!! !empty($total_search_query) ? json_encode($total_search_query) : "[]" !!}');
    console.log(array);
    $('#map2').vectorMap({
        map: 'indonesia-adm1_merc',
        backgroundColor: '#ADF3F0',
        regionStyle: {
            initial: {
                fill: '#FFFFFF'
            },
            hover: {
                fill: '#175083'
            }
        },
        zoomButtons: false,
        zoomOnScroll: false,
        zoomOnClick: false,
        zoomMax: 1,
        normalizeFunction: 'polynomial',
        onRegionClick: function (event, code) {
            // 把{{ }}改为{!! !!}取消HTML转义
            var url = '{!! route("search", ["q" => request()->get("q"), "province" => ":id"]) !!}';
            url = url.replace("%3Aid", code.toLowerCase());
            // 兜底替换所有异常转义的字符，避免出现漏网的转义内容
            url = url.replace(/&amp%3B/g, '&').replace(/&/g, '&');
            window.location.href = url;
        },
        onRegionTipShow: function (event, label, code) {
            var map = $('#map2').vectorMap('get', 'mapObject');
            var regionName = map.getRegionName(code);
            var a = array.find(a => a.name === myTrim(regionName))['count'];
            
            label.html('<div class="map-tooltip"><h4 class="header">' + regionName + '</h4><p class="description">Total: ' + a + '</p></div>');
        }
    });
}(jQuery_1_8_2));

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