Using JavaScript to Capture URL Parameters as Variables

Question

Using JavaScript to Capture URL Parameters as Variables

Similar Question:
How to retrieve query variables using JQuery?
Retrieve query string values in JavaScript

If my website's URL is

(where both parameters are URLs)

What I want to achieve now is extracting two javascript variables from the site, each containing the values of the respective URLs. For instance, the first variable would hold testsite.com, and the second one would have sample.com [including http and all, but only one hyperlink can be displayed]

How can this be accomplished?

I came across similar inquiries on this platform where users proposed complex solutions involving finding '=' and extracting everything after it, which left me puzzled. In this case, such a method would result in "http:// www.testsite.com&r= [excluding spaces]" as one of the variables.

Another user had multiple parameters like mine, but their solution was too convoluted for me to comprehend how to customize it for my needs.

Therefore, could someone provide guidance on how to solve this issue?

javascript variables parameters

Answer 1

Answer №1

Give this code a try:

function extractQueryParameter(url, parameterName) {
    var query = url.substring(url.indexOf('?')+1);
    var params = query.split('&');
    for(var i = 0; i < params.length; i++) {
        var param = params[i].split('=');
        if(param.length > 1) {
            if(param[0] == parameterName) {
                return param[1];
            }
        }
    }
    return null;
}

console.log(extractQueryParameter('http://www.akbrowser.tk/ds/?q=http://www.chess.com&r=http://www.blackle.com', 'r'));

Answer 2

Give this code a try:

function extractQueryParameter(url, parameterName) {
    var query = url.substring(url.indexOf('?')+1);
    var params = query.split('&');
    for(var i = 0; i < params.length; i++) {
        var param = params[i].split('=');
        if(param.length > 1) {
            if(param[0] == parameterName) {
                return param[1];
            }
        }
    }
    return null;
}

console.log(extractQueryParameter('http://www.akbrowser.tk/ds/?q=http://www.chess.com&r=http://www.blackle.com', 'r'));

Answer 3

Answer №2

const getValueFromUrl = (key) => {
    key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    const regexStr = "[\\?&]" + key + "=([^&#]*)";
    const regex = new RegExp(regexStr);
    const results = regex.exec(window.location.href);
    if (results == null)
        return "";
    else
        return results[1];
}

const queryString = getValueFromUrl("q");
const searchString = getValueFromUrl("s");

This function uses regular expressions to extract the value of a specific parameter from the URL.

Answer 4

const getValueFromUrl = (key) => {
    key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    const regexStr = "[\\?&]" + key + "=([^&#]*)";
    const regex = new RegExp(regexStr);
    const results = regex.exec(window.location.href);
    if (results == null)
        return "";
    else
        return results[1];
}

const queryString = getValueFromUrl("q");
const searchString = getValueFromUrl("s");

This function uses regular expressions to extract the value of a specific parameter from the URL.

Using JavaScript to Capture URL Parameters as Variables

Answer №1

Answer №2

Similar questions

Utilizing Three.js to Upload Images and Apply Them as Textures

What is the process for animating the rotation of my FBX model using the animate function?

Utilize the onClick Event to Trigger Function with an Array in ReactJS

Exploring options for accessing Google Maps API on iPhone without using UIWebView for processing JavaScript

Eliminating repeated entries in MongoDB

What is the best way to use Jquery to enclose a portion of a paragraph text within a

Retrieve data using $http.get when an accordion group is expanded in AngularJS

Establish the directive upon receiving the broadcast

scrolltop function is unable to reach the end of the div

avoiding the need to download additional audio files when the play() function is executed

Ways to retrieve information from a POST request

Properly showcasing commas

What is the best way to apply a function to every value of a property within a javascript object?

What is the reason for the absence of Duplex Stream in the Web Streams API?

Using Firebase Authentication on Your Website

Choosing an option from a dropdown menu by extracting information from JSON content

Issue: Unable to navigate the dependency graph: Module '@badeball/cypress-cucumber-preprocessor/steps' cannot be located

Using Jquery to Create a Dialog Box and Retrieve Data from a Database

Creating a Discord Bot: Building an Embed Table/List with Segmented Sections

Generating duplicate HTML code and updating the content ID based on the currently selected tab