React Native - 解析URL以获取查询变量

Question

寻找一种方法在React Native中解析URL以获取从Linking接收到的查询变量。

我接收到的URL类似于：

url-app-scheme://somePage?someVar=someVal

我想从URL中获取someVar的值。

有什么想法吗？

- Matt K

Answer 1

这应该就行了。

var url = "http://example.com?myVar=test&otherVariable=someData&number=123"

var regex = /[?&]([^=#]+)=([^&#]*)/g,
  params = {},
  match;
while (match = regex.exec(url)) {
  params[match[1]] = match[2];
}
console.log(params)

- Ray

---

如果有人需要解释，请参考此引用，同时感谢@Ray，引用=https://www.jskap.com/blog/React-Native-parse-url-query-params/。 - GD- Ganesh Deshmukh

但是如果您传递参数=带有字符#的url，这将无法正常工作。我正在将url作为参数传递，其中包含＃，但在那里它不起作用。 - GD- Ganesh Deshmukh

你能给一个简短的解释吗？ - Siraj Alam

谢谢您的回答，但使用RegExp并不安全，使用query-string会更好。 - AmerllicA

Answer 2

JavaScript中有一个URL类，旨在让您能够稳健地构建和解析URL，使查询参数易于访问:

const url = new URL('url-app-scheme://somePage?someVar=someVal');
url.searchParams.get('someVar')

遗憾的是，在React Native中，URL的实现并不完整且存在一些已知的漏洞。幸运的是，有一个可靠的polyfill库叫做react-native-url-polyfill，它提供了一个行为良好且经过测试的URL实现 - 我强烈推荐使用它。

- lukewarm

---

对我来说，当使用new URL(...时，React Native会显示“未实现”。 - Dee

Answer 3

使用查询字符串可以使其正常工作。

yarn add  query-string

import queryString from 'query-string';

const parsed = queryString.parseUrl("https://pokeapi.co/api/v2/pokemon?offset=10&limit=10");
console.log(parsed.query.offset) will display 10

- Rajesh N

Answer 4

有一些方法可以从JS生态系统中利用。尝试使用URI.js https://github.com/medialize/URI.js

- Juwan Wheatley

Answer 5

尝试使用URL模块https://www.npmjs.com/package/url

"这个模块提供了URL解析和解析工具，旨在与node.js核心的url模块功能相同。"

当使用Chrome react-native调试器时，Node URL对象可用于您的应用程序，但在未连接时无法在iPhone上使用。

因此，请使用此软件包。

npm install url

示例代码：

import url from 'url';

...

let urlObject = url.parse(inUrlString);
let outUrlString = urlObject.protocol + '//' + urlObject.host + '/more/jump?jump_path=' + encodeURIComponent(urlObject.pathname);

- spodell

---

请问我该如何使用这个模块提取URL参数？我看了它的GitHub文档，但是对于url="example.com/path/?id=1"，我还是无法弄清楚。 - GD- Ganesh Deshmukh

Answer 6

我有同样的要求，上面的解决方案对我很有效，只是补充一下，下面的答案对我也起作用。

const regex = /[?&]([^=#]+)=([^&#]*)/g;

let params = {},match;

 while ((match = regex.exec(url))) {
   params[match[1]] = match[2];
 }
console.log('parsed params', params);

例如，如果输入如下所示

https://example.com/masterplan/user?auth_token=175032c6210c32833ac70447c3f049cf9126343af9a9399373ff58e87d06479e845f35b93bc6c234ba37a9dec9&userId=1256345&userType=78

输出将如下所示

{"auth_token": "175032c6210c32833ac70447c3f049cf9126343af9a9399373ff58e87d06479e845f35b93bc6c234ba37a9dec9", "userId": "1256345", "userType": "95"}

- Hrusikesh

Answer 7

url="example.com/path/?id=1"
let urlObject = url.parse(url, true); // second parameter `true` (parse search query)
console.log(urlObject.query['id']); // 1

- Вадим Чуб

---

欢迎来到 Stack Overflow！虽然这段代码可能解决了问题，但是包括说明它如何以及为什么能解决问题将有助于提高您的帖子质量，可能会得到更多的赞。请记住，您正在回答面向未来的读者，而不仅仅是现在提问的人。请[编辑]您的答案，添加说明并指出适用的限制和假设条件。 - Yunnosch

Answer 8

更新：这不是上述问题的解决方案，因为它只在调试模式下才有效。但我没有删除此答案，因为我认为它指出了一个值得注意的细微差别。

JavaScript自己的URL Web API在React Native中得到支持（使用版本0.46）。您可以使用它来解析或构建任何和每个URL的任何部分，非常容易。

该API与Node.js中URL模块的WHATWG API完全相同。这个答案应该更加明显，但是由于可用的url解析包数量众多，很容易迷失。

编辑：由于某种原因，这仅在JS调试模式下有效，否则无效。因此，这个解决方案并不真正有效，但我仍然将其保留在这里，因为我想知道如何让相同的URL模块与react-native一起工作。

- Raunaqss

---

这可能是因为它来自于您的浏览器而不是React Native。太糟糕了:( - smaclell

当您打开“远程JS调试”时，您的代码将在浏览器中运行，而不是在设备上运行。 Chrome使用V8，而React Native使用JavaScriptCore，因此您可能会遇到诸如此类的差异。您可以在此处获取更多信息：https://facebook.github.io/react-native/docs/javascript-environment.html - AlicanC

@AlicanC感谢您在评论中澄清了这种行为背后的原因。 - Raunaqss