Cómo obtener valores de parámetros de cadena de consulta desde una URL usando JavaScript
Podemos obtener parámetros de cadena de consulta en JavaScript sin usar js de terceros como jQuery, etc.
- Código JavaScript simple
- ECMAScript 6
- API JavaScript URLSearchParams
Los parámetros de URL de la cadena de consulta de Javascript son muy útiles al realizar operaciones CRUD en el lado del servidor. Y desde el lado del cliente, es posible que también necesitemos obtener parámetros de la cadena de consulta de la URL usando JavaScript y modificarlos.
Obtenga los parámetros de la cadena de consulta de la URL usando JavaScript simple:
Para obtener parámetros de cadena de consulta en JavaScript, use JavaScript separar() Además, utilizando la expresión regular de JavaScript, podemos obtener parámetros en el par clave-valor.
Tome un ejemplo de URL de muestra https://www.arungudelli.com?param1=1¶m2=--2 el parámetro de cadena de consulta en la URL dada es ?param1=1¶m2=2.
locast.org/activar código|_+_|
Ahora usaremos la expresión regular para hacer coincidir el patrón (a = b) y devolver parámetros en el par clave-valor json.
|_+_|
Y si no está pasando el parámetro de URL, tomará la URL actual de var url = https://www.arungudelli.com?param1=1¶m2=2; var query_string_paramter = url.split('?')[1]; //returns param1=1¶m2=2, removing ? y {param1:1,param2:2} devolverá el parámetro de cadena de consulta.
El fragmento de código completo es el siguiente
proyectos sobre estructuras de datos y algoritmos|_+_|
Obtenga los parámetros de la cadena de consulta de la URL usando ES6 (ECMAScript 6):
En JavsScript, para obtener los parámetros de la cadena de consulta en formato JSON, utilice el siguiente fragmento de código ES6 (ECMAScript 6)
|_+_|Obtenga valores de parámetro de cadena de consulta de URL usando JavaScript URLSearchParams API:
Para obtener valores de parámetro de cadena de consulta en JavaScript, podemos usar UrlSearchParmas API en JavaScript.
El mecanismo de análisis de cadenas es una forma fea y antigua de obtener valores de parámetros de cadenas de consulta.
Si está utilizando los últimos navegadores como Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ y Chrome 49+, puede usar window.location API en Javascript.
Utilice el siguiente fragmento de código para obtener los parámetros de la cadena de consulta de la URL actual
|_+_|Por ejemplo, si la URL actual es window.location.search
06 apis del lado del servidor: panel meteorológico
Ahora puede obtener valores de parámetros por nombre usando /** * This function getQueryStringParameters takes url as parmater and returns * parameters name and value in JSON key value format * @parameter {String} url * (if url is not passed it takes the current url from window.location.href) * **/ function getQueryStringParameters(url){ var urlParams={}, match, additional = /+/g, // Regex for replacing additional symbol with a space search = /([^&=]+)=?([^&]*)/g, decode = function (s) { return decodeURIComponent(s.replace(additional, ' ')); }, query; if (url){ if(url.split('?').length>0){ query = url.split('?')[1]; } }else{ url = window.location.href; query = window.location.search.substring(1); } while (match = search.exec(query)){ urlParams[decode(match[1])] = decode(match[2]); } return urlParams; } método de URLSearchParams FUEGO.
O podemos obtener el objeto de parámetros usando searchParams propiedad del objeto URL.
|_+_|Si desea obtener el parámetro de cadena de consulta para cualquier URL, use el siguiente fragmento de código JavaScript
|_+_|Aparte de /** * This ES6(ECMAScript) function getQueryStringParameters takes url * as parmater and returns * parameters name and value in JSON key value format * @parameter {String} url * (if url is not passed it takes the current url from window.location.href) * **/ const getQueryStringParameters = url => { if (url){ if(url.split('?').length>0){ query = url.split('?')[1]; } }else{ url = window.location.href; query = window.location.search.substring(1); } return (/^[?#]/.test(query) ? query.slice(1) : query) .split('&') .reduce((params, param) => { let [ key, value ] = param.split('='); params[key] = value ? decodeURIComponent(value.replace(/+/g, ' ')) : ''; return params; }, { }); }; método UrlSearchParams también tenemos métodos como /* This URLSearchParams takes the query string as parameter */ var parameters = new URLSearchParams(window.location.search); , https://www.arungudelli.com?param1=1¶m2=2 , get(key), parameters.get('param1') //1 parameters.get('param2') //2
Y podemos recorrer las teclas de parámetros usando var parameters = new URL(window.location).searchParams; parameters.get('param1') //1 parameters.get('param2') //2 método, valores usando var url = new URL('https://www.arungudelli.com?param1=1¶m2=2'); var parameters = new URLSearchParams(url.search); // or by using searchParams property var parameters = url.searchParams; parameters.get('param1') //1 parameters.get('param2') //2 método y valores clave mediante get(key) método
Obtenga valores de parámetros de URL por nombre en JavaScript:
Para obtener los valores de los parámetros de URL por nombre en JavaScript, utilice el siguiente fragmento de código.
|_+_|Ahora podemos pasar el nombre del parámetro al método anterior para obtener los valores de los parámetros de URL.
el código de enlace de roku no funciona|_+_|
Con la función anterior, puede obtener valores de parámetros de URL individuales pasando el nombre del parámetro y la URL. Si tiene otros fragmentos, compártalos.
Gracias !
#JavaScript # ES6 #API