正在寻找一种方法来解析URL,以便在React Native中获取从Linking接收的查询变量。我收到的URL如下所示:url应用程序方案://某个页面?某个变量=某个值我想从URL获取someVar值。有什么想法吗?
laawzig21#
这个应该可以
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)
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)
mmvthczy2#
有一个URL class in JavaScript,它可以让你健壮地构建和解析URL,使查询参数更容易访问:
const url = new URL('url-app-scheme://somePage?someVar=someVal');url.searchParams.get('someVar')
const url = new URL('url-app-scheme://somePage?someVar=someVal');
url.searchParams.get('someVar')
遗憾的是,在React Native中实现的URL并不完整,幸运的是,有一个名为react-native-url-polyfill的可靠polyfill库,它提供了一个行为良好并经过测试的URL实现-我强烈推荐它。
URL
bkkx9g8r3#
使用query-string可以正常工作
yarn add query-stringimport 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
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
k4aesqcs4#
您可以从JS生态系统中利用一些方法来实现这一点。
jgzswidk5#
尝试URL https://www.npmjs.com/package/url"此模块具有用于URL解析和解析的实用程序,旨在与node.js核心url模块具有相同的功能。"使用Chrome react原生调试器时,节点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);
import url from 'url';
...
let urlObject = url.parse(inUrlString);
let outUrlString = urlObject.protocol + '//' + urlObject.host + '/more/jump?jump_path=' + encodeURIComponent(urlObject.pathname);
mlmc2os56#
url="example.com/path/?id=1"let urlObject = url.parse(url, true); // second parameter `true` (parse search query)console.log(urlObject.query['id']); // 1
url="example.com/path/?id=1"
let urlObject = url.parse(url, true); // second parameter `true` (parse search query)
console.log(urlObject.query['id']); // 1
vlurs2pr7#
更新:这不是上述问题的解决方案,因为它只有在调试模式下才能工作。但是我没有删除这个答案,因为我认为它指出了一个值得注意的细微差别。React Native(使用版本0.46)支持JavaScript自己的URL Web API,您可以使用to轻松地解析或构建url的任何部分。这个API与Node.js中URL模块的WHATWG API相同。这个答案应该更明显,但是它很容易因为可用的URL解析包的数量而迷失。编辑:由于某种原因,它只能在JS调试模式下工作,否则就不行了。因此,这个解决方案实际上并不有效,但我将其留在这里,因为我很想知道如何让相同的URL模块与react-native一起工作。
7条答案
按热度按时间laawzig21#
这个应该可以
mmvthczy2#
有一个URL class in JavaScript,它可以让你健壮地构建和解析URL,使查询参数更容易访问:
遗憾的是,在React Native中实现的
URL
并不完整,幸运的是,有一个名为react-native-url-polyfill的可靠polyfill库,它提供了一个行为良好并经过测试的URL
实现-我强烈推荐它。bkkx9g8r3#
使用query-string可以正常工作
k4aesqcs4#
您可以从JS生态系统中利用一些方法来实现这一点。
jgzswidk5#
尝试URL https://www.npmjs.com/package/url
"此模块具有用于URL解析和解析的实用程序,旨在与node.js核心url模块具有相同的功能。"
使用Chrome react原生调试器时,节点URL对象可用于您的应用,但未绑定时,该对象在iPhone上不可用。
所以使用这个软件包
样本代码:
mlmc2os56#
vlurs2pr7#
更新:这不是上述问题的解决方案,因为它只有在调试模式下才能工作。但是我没有删除这个答案,因为我认为它指出了一个值得注意的细微差别。
React Native(使用版本0.46)支持JavaScript自己的URL Web API,您可以使用to轻松地解析或构建url的任何部分。
这个API与Node.js中URL模块的WHATWG API相同。这个答案应该更明显,但是它很容易因为可用的URL解析包的数量而迷失。
编辑:由于某种原因,它只能在JS调试模式下工作,否则就不行了。因此,这个解决方案实际上并不有效,但我将其留在这里,因为我很想知道如何让相同的URL模块与react-native一起工作。