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

Question

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

我收到的 URL 类似于：

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

我想从 URL 获取 someVar 值。

有什么想法吗？

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)

Answer 2

JavaScript 中有一个 URL 类，旨在让您能够稳健地构建和解析 URL，从而轻松访问查询参数：

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

遗憾的是，React Native 中

URL

的实现并不完整并且存在一些已知的错误。幸运的是，有一个名为 react-native-url-polyfill 的可靠的 polyfill 库，它提供了

URL

的实现，该实现表现良好且经过测试 - 我强烈推荐它。

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

Answer 4

您可以从 JS 生态系统中利用多种方法来做到这一点。尝试 URI.js https://github.com/medialize/URI.js

Answer 5

尝试网址https://www.npmjs.com/package/url

“该模块具有用于 URL 解析和解析的实用程序，旨在与 Node.js 核心 url 模块具有同等功能。”

使用 Chrome React-Native 调试器时，节点 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);

Answer 6

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

Answer 7

我有同样的要求，上述解决方案对我有用，只需添加下面的上述答案也对我有用

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=7 8

输出如下

{“auth_token”： “175032c6210c32833ac70447c3f049cf9126343af9a9399373ff58e87d06479e845f35b93bc6c234ba37a9dec9”， “用户ID”：“1256345”，“用户类型”：“95”}

Answer 8

更新：这不是上述问题的解决方案，因为除非在调试模式下，否则它不起作用。然而，我没有删除这个答案，因为我认为它指出了一个值得注意的细微差别。

React Native 支持

JavaScript 自己的 URL Web API（使用版本 0.46）。您可以使用 to 轻松解析或构建 url 的任何部分。

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

编辑：由于某种原因，这仅在 JS 调试模式下有效，否则无效。所以这个解决方案实际上并不有效，但我将其留在这里，因为我很想知道如何让相同的 URL 模块与 React-Native 一起使用。