在 Javascript 中解析友好的 URL答案

【问题标题】：Parsing Friendly Urls in Javascript在 Javascript 中解析友好的 URL
【发布时间】：2013-08-25 06:15:12
【问题描述】：

我维护的网站正在从标准的 php url 格式迁移：

 http://example.com/page.php?key=value&key=value...

到一个更加 seo 友好的格式，像这样：

http://example.com/page/key/value/key/value...

我在 javascript 中使用这个函数来添加、更新/修改旧格式的 url 字符串：

function UpdateQueryString(key, value, url) {
    if (!url) url = window.location.href;
    var re = new RegExp("([?|&])" + key + "=.*?(&|#|$)(.*)", "gi");

    if (re.test(url)) {
        if (typeof value !== 'undefined' && value !== null)
            return url.replace(re, '$1' + key + "=" + value + '$2$3');
        else {
            return url.replace(re, '$1$3').replace(/(&|\?)$/, '');
        }
    }
    else {
        if (typeof value !== 'undefined' && value !== null) {
            var separator = url.indexOf('?') !== -1 ? '&' : '?',
            hash = url.split('#');
            url = hash[0] + separator + key + '=' + value;
            if (hash[1]) url += '#' + hash[1];
            return url;
        }
        else
            return url;
    }
}

这非常有效。现在这个函数突出了我不擅长的两件事，javascript 和正则表达式。我正在尝试修改此函数以使用斜杠“/”而不是？&=。这是我第一次尝试：

function myUpdateQueryString(key, value, url)
{
    if (!url) url = window.location.href;
    var re = new RegExp("([/])" + key + "(/)(.*)", "gi");

    if (re.test(url)) {
        if (typeof value !== 'undefined' && value !== null)
            return url.replace(re, '$1' + key + "/" + value + '$2$3');
        else {
            return url.replace(re, '$1$3').replace(/(\/)$/, '');
        }
    }
    else {
        if (typeof value !== 'undefined' && value !== null) {
            var separator = '/',
            hash = url.split('#');
            url = hash[0] + separator + key + '/' + value;
            if (hash[1]) url += '#' + hash[1];
            return url;
        }
        else
            return url;
    }    
}

这个功能让我非常接近。它将向 url 字符串添加新的键/值，但我无法更新/修改字符串中的当前值。我认为这是一个简单的修复。我只是在正则表达式和其他一些事情中难以理解 $2$3 左右。

谢谢

我想我找到了答案这似乎目前有效：

function UpdateQueryString(key, value, url)
{
    if (!url) url = window.location.href;
    var re = new RegExp("([/])" + key + "/.*?(/|$)", "gi");
    var separator = '/';
    if (url.match(re)) {
        return url.replace(re, '$1' + key + "/" + value + '$2');
    }
    else {
        return url + separator + key + "/" + value;
    }
}

谁能看出这有什么问题？

【问题讨论】：

标签： javascript friendly-url url-parsing parse-url

【解决方案1】：

你能改成这样吗？

url.split('/?|&|=/').join('/');

这应该用斜杠替换 URL 中的所有问号、& 和等号。

【讨论】：

我不想替换 ?& 和 =。我正在寻找一种在 javascript 中操作 url 字符串的快速方法。我见过的每个库和函数都处理标准 page.php?key=value。当 url 结构类似于 page/key/value 时，我正在寻找一种操作 url 字符串的方法。我什么也没找到。似乎我正在使用的功能非常接近，只是正则表达式略有偏差。
好吧，我还有几个问题：1）当你说改变url字符串时，你是指传递给函数的字符串还是浏览器url栏中的实际url？如果是前者，那么在操作页面/键/值字符串后，您要尝试完成什么？ 2）为了澄清起见，您是否尝试将查询字符串更改为目录结构，反之亦然？

【解决方案2】：

function UpdateQueryString(key, value, url)
{
    if (!url) url = window.location.href;
    var re = new RegExp("([/])" + key + "/.*?(/|$)", "gi");
    var separator = '/';
    if (url.match(re)) {
        return url.replace(re, '$1' + key + "/" + value + '$2');
    }
    else {
        return url + separator + key + "/" + value;
    }
}

这似乎有效。谁能发现这有什么问题。我不太擅长正则表达式或 javascript

【讨论】：