Obtener y eliminar parámetros de URL mediante JavaScript

.entry-content a {
text-decoration: none!important;
}

Parámetros en URL son variables específicas que pueden contener valores de longitud limitada.
Es posible que haya visto la URL que contiene diferentes tipos de parámetros.

Ilustración de parámetros en URL:

Si no sabe acerca de los parámetros, déjeme mostrarle cómo se ven.
La apariencia principal de los parámetros en la URL es así.

https://online-html-viewer.blogspot.com/2020/04/costume-check-boxes-and-radio-buttons-pure-css.html?fullscreen=1

Aquí en la URL anterior pantalla completa=1 es el parámetro o variable que contiene valor 1.
Si usted es un desarrollador web, diseñador web o programador, tendrá información sobre métodos, especialmente en PHP o JavaScript.

Los métodos son:

La mayoría de los parámetros de URL se utilizan para el método GET.
El motivo principal de este artículo es informarle cómo puede crear parámetros de recuperación y eliminación. Si no sabe qué son los parámetros, diríjase a google.com.

Creación de parámetros de URL:

Crear parámetros de URL no es muy difícil, solo tiene que agregar un parámetro y su valor en la URL.
He agregado el parámetro en la ilustración anterior. Antes del primer parámetro hay que añadir ? y luego, si desea varios parámetros, sepárelos por & firmar.

Obtener parámetros de URL:

A obtener el parámetro de la URL usando JavaScript puede usar la siguiente función de JavaScript para obtener cualquier parámetro de la URL.

function getParameterByName(key, sourceURL) {
    sourceURL || (sourceURL = window.location.href), key = key.replace(/[[]]/g, "$&");
    var r = new RegExp("[?&]" + key + "(=([^&#]*)|&|#|$)").exec(sourceURL);
    return r ? r[2] ? decodeURIComponent(r[2].replace(/+/g, " ")) : "" : null
}

Ahora echemos un vistazo a un ejemplo de cómo podemos recuperar u obtener un parámetro de la URL.
Por ejemplo, esta es una URL que contiene un parámetro pantalla completa=1

https://online-html-viewer.blogspot.com/2020/04/costume-check-boxes-and-radio-buttons-pure-css.html?fullscreen=1

Ahora veamos cómo podemos recuperar el valor de este parámetro usando la función de JavaScript anterior.

var para = getParameterByName('fullscreen');
document.write(para);
/*It Will Return 1 as a parameter value*/

La mayoría de las veces, solo desea obtener un parámetro de la URL, pero a veces también queremos eliminar un parámetro específico de la URL y, en ese caso, puede usar la siguiente función de JavaScript.

function removeParameterByName(key, sourceURL) {
    sourceURL || (sourceURL=window.location.href)
    var rtn = sourceURL.split("?")[0],
        param,
        params_arr = [],
        queryString = (sourceURL.indexOf("?") !== -1) ? sourceURL.split("?")[1] : "";
    if (queryString !== "") {
        params_arr = queryString.split("&");
        for (var i = params_arr.length - 1; i >= 0; i -= 1) {
            param = params_arr[i].split("=")[0];
            if (param === key) {
                params_arr.splice(i, 1);
            }
        }
        rtn = rtn + "?" + params_arr.join("&");
    }
    return rtn;
}

Ahora, esta función de JavaScript le permitirá eliminar un parámetro específico de la URL.
Demostremos cómo podemos eliminar el parámetro pantalla completa=1 de la URL anterior.
Así es como funciona el JavaScript anterior para eliminar un parámetro de la URL trabajará.

var para = removeParameterByName('fullscreen');
document.write(para);
/*It will return https://online-html-viewer.blogspot.com/2020/04/costume-check-boxes-and-radio-buttons-pure-css.html? */

Cómo establecer múltiples parámetros en la URL:

Puede configurar fácilmente varios parámetros en la URL simplemente separando cada parámetro con & firmar.
Consulte la URL que se proporciona a continuación; consta de parámetros separados por el signo &.
https://ejemplo.com/index.html?para1=1&para2=2

Conclusión:

Se trata de establecer, obtener y eliminar variables o parámetros en la URL. Usando parámetros en la URL, puede hacer que su sitio web se vea dinámico y agregarle diferentes funcionalidades.

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *