高级URL查询

Question

，所以我有一个问题要解决，我只在不到一年的时间内进行开发，所以对我来说，事情仍然很新。我的目标是创建一个能够在URL中找到UTM值的脚本，如果它们存在，然后将它们存储到变量中，如果它们存在。我已经有一个脚本工作，但是只有以非常特定的方式构造URL，

localhost/？utm_source = google＆amp; utm_medium = cpc＆amp; utm_campaign =（roi） cdn center＆amp; utm_content = cdn （phrase ％26 broad）

它可能是实际生产中的各种URL，例如 -

localhost/？utm_source = google＆amp; utm_medium = cpc＆amp; utm_campaign =（ROI） CDN 一般localhost/？utm_source = google＆amp; utm_medium = cpc＆amp; utm_campaign =（ROI） cdn eneral＆amp; utm_content = cdn （短语 ％26 broad）

这是我到目前为止编写的代码。如果您对如何在任何情况下如何使其更好地工作或您推荐给"高级初学者"的任何资源有任何建议，我将非常感谢！

！

var urlSearch = window.location.search;
        if (urlSearch.length > 1) {
        if (urlSearch.match('utm_source=(.*)&utm_medium')) {
            var utmSource = urlSearch.match('utm_source=(.*)&utm_medium')[1];
        }
        if (urlSearch.match('utm_medium=(.*)&utm_campaign')) {
            var utmMedium = urlSearch.match('utm_medium=(.*)&utm_campaign')[1];
        }
        if (urlSearch.match('utm_campaign=(.*)&utm_content')) {
            var utmCampaign = urlSearch.match('utm_campaign=(.*)&utm_content')[1];
        }
        if (urlSearch.match('utm_content=(.*)&utm_term')) {
            var utmContent = urlSearch.match('utm_content=(.*)&utm_term')[1];
        }
        if (urlSearch.match('utm_term=(.*)&')) {
            var utmTerm = urlSearch.match('utm_term=(.*)&')[1];
        }
    }

Answer 1

您的方法的特定问题是查询字符串不能保证为特定的顺序。因此，如果浏览器或上一页上的任何更改会导致查询字符串变量以不同的顺序提交，则您的代码将停止工作。还有其他一些问题，只是其中一个正在解码任何空间或复杂的值。

使用查询字符串解析器，例如此示例：

<title>JavaScript Form Processor</title>

<script>
function ptq(q)
{
    /* parse the query */
    /* semicolons are nonstandard but we accept them */
    var x = q.replace(/;/g, '&').split('&'), i, name, t;
    /* q changes from string version of query to object */
    for (q={}, i=0; i<x.length; i++)
    {
        t = x[i].split('=', 2);
        name = unescape(t[0]); /* unescape can and should be replaced with decodeURIComponent() for almost all browsers */
        if (!q[name])
            q[name] = [];
        if (t.length > 1)
        {
            q[name][q[name].length] = unescape(t[1]);
        }
        /* next two lines are nonstandard */
        else
            q[name][q[name].length] = true;
    }
    return q;
}
function param() {
    return ptq(location.search.substring(1).replace(/+/g, ' '));
}
q = param();
firstname = q.name1;
/* use q['name1'] syntax to access more complicated variables from the query string */
document.write('<h1>Hello ', firstname || 'Anonymous', '!</h1>');
</script>
<form>
Type your first name: <input type="text" name="name1" />
<input type="submit" value="Submit" />
</form>

为了解析您在问题中提到的变量，您只需使用上述脚本中创建的q变量，并访问其属性：

        var utmSource = q.utm_source, utmMedium = q.utm_medium, etc.;