如何使用JavaScript从URL检索所有或特定的get参数 _JavaScript开发

本文概述

检索单个get参数
检索所有获取参数

你是否曾经在某个前端应用程序中工作过, 突然需要修改一些服务器端代码, 但是你却无法修改它, 因为虽然这样做是必要的, 但你根本无法或者你没有权限？不？我们做到了, 相信我们, 这确实是一场灾难。不仅仅是因为你无法按自己的意愿工作, 还因为你无法使事情以正确的方式工作。例如, 根据URL中get参数(即viewType)的存在或值, 我们将以两种不同的方式向用户显示一些元素, 这意味着我们将在文档中呈现两种视图类型, 当通过URL中的GET参数请求特定视图类型时, 会隐藏。
通过根据请求中的viewType参数添加几个if语句, 可以轻松地在服务器端解决此问题, 但是有时你不得不在视图中进行检查。值得一提的是, 这个项目并不存在, 它是一个示例, 可以帮助你了解我们正在谈论的内容。
如果你真的分析了项目的逻辑并且没有其他方法可以执行此操作, 或者只是出于未知原因而仅需要从视图中的URL访问GET参数, 那么我们将向你展示如何使用JavaScript轻松实现。
怪胎笔记(可能很重要)本文中的任何方法都不会解码URL中的+(加号), 因为所有方法都依赖于JavaScript函数encodeURIComponent。许多网站都使用加号代替URL编码表示形式％20(甚至是Google), 而不是URL中的空格, 但是, 仅应将其用于响应应用程序/ x-www-form类型的内容-urlencoded。这是开发人员之间一个有趣的讨论主题, 因为你似乎不应该使用加号来表示某些GET参数中的空格, 但是它使字符串真正易于使用, 因为使用加号更易于阅读。
我们建议你在此处的堆栈溢出中阅读有关此讨论的更多信息。
检索单个get参数通常在使用语言服务器(如PHP)的情况下, 你可以轻松地检索GET参数并根据其值执行某些操作：

< ?phpif (isset($_GET['parameter'])) {echo $_GET['parameter']; }else{// Do other thing}

【如何使用JavaScript从URL检索所有或特定的get参数】但是, 如果你被迫或需要在视图中执行此操作, 则浏览器中没有可用的默认功能来检索它。这意味着你将需要构建自己的函数来从文档中检索那些值。
要从文档中的URL检索单个参数, 我们可以使用2种方法来实现：
A.使用正则表达式
以下_get函数使用正则表达式检索你的get参数, 并在该参数不存在的情况下返回undefined。它以两种方式编写, 第一种方式允许你直接从文档中进行操作(将使用的URL将是当前文档位置), 第二种方式则希望将URL作为第二个参数进行处理：

/** * Function to retrieve a get parameter from the current document (using location.href) * * @param parameter {String} Key of the get parameter to retrieve */function _get(parameter) {var reg = new RegExp( '[?& ]' + parameter + '=([^& #]*)', 'i' ); var string = reg.exec(window.location.href); return string ? string[1] : undefined; }; /** * Function to retrieve a get parameter from a String URL providen as second argument * * @param parameter {String} Key of the get parameter to retrieve * @param URL {String} The URL to search for the get parameter */function _get(parameter , URL) {var reg = new RegExp( '[?& ]' + parameter + '=([^& #]*)', 'i' ); var string = reg.exec(URL); return string ? string[1] : undefined; };

它们可以如下使用：

// First method// Current document URL = http://ourcodeworld.com/search?q=How%20are%20youconsole.log(_get("q")); // How are you// Second methodconsole.log(_get("q", "http://ourcodeworld.com/search?q=How%20are%20you")); // How are you

B.分割网址
如果你不喜欢正则表达式是因为你不理解它们或者认为它们比普通的字符串处理速度慢, 那么我们将向你展示另一种通过拆分从URL检索get参数的方法。
在第一种方法中, 我们将在location.search字符串中搜索, 该字符串以？q = 12＆otp = 421之类的字符串返回所有查询参数。然后, 字符串将由＆符号分隔, 表示将使用新的查询参数。在第二个参数中, 我们将使用相同的方法进行拆分, 但是将整个URL Providen作为第二个参数：

/** * Retrieves the get parameter with the providen key in the current location of the document. * * @param identifier {String} Key of the get parameter */function _getParameter(identifier) {var result = undefined, tmp = []; var items = window.location.search.substr(1).split("& "); for (var index = 0; index < items.length; index++) {tmp = items[index].split("="); if (tmp[0] === identifier){result = decodeURIComponent(tmp[1]); }}return result; }/** * Retrieves the get parameter with the providen key on the providen URL as second argument. * * @param identifier {String} Key of the get parameter * @param URL {String} The URL to process */function _getParameter(identifier , URL) {var result = null, tmp = []; var usefulParam = URL.split("?")[1] || ""; var items = usefulParam.split("& "); for (var index = 0; index < items.length; index++) {tmp = items[index].split("="); if (tmp[0] === identifier){result = decodeURIComponent(tmp[1]); }}return result; }

它们可以按如下方式使用：

// First method// Current document URL = http://ourcodeworld.com/search?q=How%20are%20youconsole.log(_getParameter("q")); // How are you// Second methodconsole.log(_getParameter("q", "http://ourcodeworld.com/search?q=How%20are%20you")); // How are you

检索所有获取参数尽管由于任何人都可以从URL修改get参数, 因此定义期望的get参数会更安全, 但是你可以根据需要在单个对象中检索URL的所有get参数。如前所述, 你的代码检查特定的查询参数, 而不是自动循环遍历它们很重要。
以下代码段将在窗口中声明一个对象, 即QueryString。在此对象中, 将为URL中可用的每个GET参数声明一个新元素(使用与该参数相同的键)。第二个片段的功能与第一个片段相同, 但无需在窗口中声明它, 而可以用作将对象返回到变量的函数：

/** * Declares a new object in the window namely QueryString that contains every get parameter from the current URL as a property */window.QueryString = function () {// This function is anonymous, is executed immediately and // the return value is assigned to QueryString!var query_string = {}; var query = window.location.search.substring(1); var vars = query.split("& "); for (var i = 0; i < vars.length; i++) {var pair = vars[i].split("="); // If first entry with this nameif (typeof query_string[pair[0]] === "undefined") {query_string[pair[0]] = decodeURIComponent(pair[1]); // If second entry with this name} else if (typeof query_string[pair[0]] === "string") {var arr = [query_string[pair[0]], decodeURIComponent(pair[1])]; query_string[pair[0]] = arr; // If third or later entry with this name} else {query_string[pair[0]].push(decodeURIComponent(pair[1])); }}return query_string; }(); /** * This function returns an object that contains every get parameter from a URL (first argument) as a property * * @param URL {String} */function QueryString(URL) {// This function is anonymous, is executed immediately and // the return value is assigned to QueryString!var query_string = {}; var usefulParam = URL.split("?")[1] || ""; var query = usefulParam || ""; var vars = query.split("& "); for (var i = 0; i < vars.length; i++) {var pair = vars[i].split("="); // If first entry with this nameif (typeof query_string[pair[0]] === "undefined") {query_string[pair[0]] = decodeURIComponent(pair[1]); // If second entry with this name} else if (typeof query_string[pair[0]] === "string") {var arr = [query_string[pair[0]], decodeURIComponent(pair[1])]; query_string[pair[0]] = arr; // If third or later entry with this name} else {query_string[pair[0]].push(decodeURIComponent(pair[1])); }}return query_string; }

将该对象想象为PHP的$ _GET数组, 因此你可以简单地访问该对象中的键, 并且在该键不存在的情况下, 它将只是未定义：

// Current URL: https://www.google.de/?gfe_rd=cr& ei=JFkHWdqAFafPXq3goBA& gws_rd=ssl& q=Our+Code+WorldQueryString["q"]; // Our+Code+WorldQueryString["gfe_rd"]; // crQueryString["ei"]; //JFkHWdqAFafPXq3goBAQueryString["gws_rd"]; // ssl// {//"gfe_rd": "cr", //"ei": "JFkHWdqAFafPXq3goBA", //"gws_rd": "ssl", //"q": "Our+Code+World"// }var $_GET = QueryString("https://www.google.de/?gfe_rd=cr& ei=JFkHWdqAFafPXq3goBA& gws_rd=ssl& q=Our+Code+World");

编码愉快！