javascript - 正斜杠被替换为 : %252F in AngularJS

Question

我编写了一个 AngularJS 应用程序，其中输入框中值的更改会动态更新到 URI 中，该 URI 由正斜杠分隔，作为在 URI 中存储数据的方法，最终可以共享数据。本质上，URL 就是数据库。当有人访问 URI 时，URI 字符串中的值将被放回到应用程序的范围中。设置页面示例:

http://whohe.co.uk/Quiz_Scorer_App.html#/!/TQS//////////////////////////////////

将输入框中的值放入 URI 时，我使用以下函数:

    $scope.go = function (term,pos) { /* Fires on Keyup, pushes term into the path */
        // var res = term.replace(/\//g, "%2F"); Fix to allow slash in fields
        $location.path(update(decodeURI($location.url()),pos,term), false);
    };


function update(line,index,term) {
    var arr = line.split("/");
    arr.splice(index,1,term);
    var res = arr.join("/");
    return res;
}

当从 URL 获取值到范围时，我使用decodeURI，例如:

$scope.TeamAN = decodeURI(arr[14]);

我的问题是正斜杠。例如如果我输入 N/A，这会导致一个重大问题，因为输入会跨入下一个字段。

理想情况下，我会将所有正斜杠替换为 %2F，但是当我这样做时，使用:

term.replace(/\//g, "%2F")

以下内容已更新为 URI:

N%252FA - 它被双重编码。

当页面刷新时，返回:

N%2FA

而不是我所期待的 N/A。

希望这是清楚的。如果您能帮助解决这个问题，我们将不胜感激。

问候，

Answer 1

根据讨论，首先将 / 更改为 %2F:

$scope.go = function (term,pos) { /* Fires on Keyup, pushes term into the path */
    var res = term.replace(/\//g, "%2F"); Fix to allow slash in fields
    $location.path(update(decodeURI($location.url()),pos,res), false);
};

然后，您需要在读取 URI 时对 %2F 进行解码:

旧代码

    // Fill the boxes with any values found in the URL
    var url = $location.url();
    var arr = url.split("/");
    $scope.LeagueDivision = decodeURI(arr[3]);
    $scope.Venue = decodeURI(arr[4]);
    $scope.Competition = decodeURI(arr[5]);
    $scope.PhaseMatch = decodeURI(arr[6]);
    $scope.Questioner = decodeURI(arr[7]);
    $scope.Scorer = decodeURI(arr[8]);
    $scope.TeamAN = decodeURI(arr[9]);
    $scope.TeamBN = decodeURI(arr[10]);
    $scope.Player = [];
    for (var i = 0; i < 8; i++) { $scope.Player[i] = decodeURI(arr[i+11]); }
    $scope.TeamAS = parseInt(0+decodeURI(arr[19]));
    $scope.TeamBS = parseInt(0+decodeURI(arr[20]));
    $scope.Start = [];
    for (var i = 0; i < 8; i++) { $scope.Start[i] = decodeURI(arr[i+21]); }
    $scope.First = parseInt(0+decodeURI(arr[29]));
    $scope.StartDateTime = decodeURI(arr[30]);
    $scope.TeamAC = parseInt(0+decodeURI(arr[31]));
    $scope.TeamBC = parseInt(0+decodeURI(arr[32]));
    if($scope.StartDateTime==''){
            d = new Date();
            var date = d.YYYYMMDDhhmmssmmm();
            $scope.StartDateTime = date.substring(0, date.length - 7);
            $location.path(update(decodeURI($location.url()),30,$scope.StartDateTime), false);
    }
    $scope.go = function (term,pos) { /* Fires on Keyup, pushes term into the path */
            term = term.replace(/\//g, "%2F"); // Fix to allow slash in fields
            var i = update(decodeURI($location.url()),pos,term);
            $location.path(i, false);
    };
    $scope.start = function () {
            $location.path(update(decodeURI($location.url()),2,'TQM'), true);
            if(!$scope.$$phase) { $scope.$apply(); }
    };

新代码

    // Fill the boxes with any values found in the URL
    var url = $location.url();
    var arr = url.split("/");
    arr = arr.map(function(comp){return decodeURI(comp).replace(/%2F/g,"/")});
    $scope.LeagueDivision = arr[3];
    $scope.Venue = arr[4];
    $scope.Competition = arr[5];
    $scope.PhaseMatch = arr[6];
    $scope.Questioner = arr[7];
    $scope.Scorer = arr[8];
    $scope.TeamAN = arr[9];
    $scope.TeamBN = arr[10];
    $scope.Player = [];
    for (var i = 0; i < 8; i++) { $scope.Player[i] = arr[i+11]; }
    $scope.TeamAS = parseInt(0+arr[19]);
    $scope.TeamBS = parseInt(0+arr[20]);
    $scope.Start = [];
    for (var i = 0; i < 8; i++) { $scope.Start[i] = arr[i+21]; }
    $scope.First = parseInt(0+arr[29]);
    $scope.StartDateTime = arr[30];
    $scope.TeamAC = parseInt(0+arr[31]);
    $scope.TeamBC = parseInt(0+arr[32]);
    if($scope.StartDateTime==''){
            d = new Date();
            var date = d.YYYYMMDDhhmmssmmm();
            $scope.StartDateTime = date.substring(0, date.length - 7);
            $location.path(update(decodeURI($location.url()),30,$scope.StartDateTime), false);
    }
    $scope.go = function (term,pos) { /* Fires on Keyup, pushes term into the path */
            term = term.replace(/\//g, "%2F"); // Fix to allow slash in fields
            var i = update(decodeURI($location.url()),pos,term);
            $location.path(i, false);
    };
    $scope.start = function () {
            $location.path(update(decodeURI($location.url()),2,'TQM'), true);
            if(!$scope.$$phase) { $scope.$apply(); }
    };