JavaScript获取URL参数

In this tutorial, I will tell you about how you can get URL parameters with javascript.

在本教程中，我将向您介绍如何使用javascript获取URL参数。

Passing URL parameters is a nice way to move from one page to another. As we know URL is string in which there are certain variables present which are used to move forward to the new page. You can get it by checking in URL string the text written after question mark shows the variable name, value pair follow separated by an ampersand.

传递URL参数是从一页移动到另一页的一种好方法。 我们知道，URL是字符串，其中存在某些变量，这些变量用于前进到新页面。 您可以通过在URL字符串中签入问号后显示的文本(表示变量名称，值对后跟与号分隔)来获取它。

The disadvantage of using this method is that it is visible to the user and anyone can manipulate it by manual editing. There are some other secure ways that we can do this is by using post method, session cookies, or database to store the variables.

使用此方法的缺点是它对用户可见，任何人都可以通过手动编辑对其进行操作。 通过使用post方法，会话cookie或数据库来存储变量，我们还有其他一些安全的方法可以执行此操作。

Basically, for this, we have to understand how it is passed.

基本上，为此，我们必须了解它是如何传递的。

There are various ways buy which we can fetch the parameters from url, lets have a look on them one by one.

有多种购买方式，我们可以从url获取参数，让我们一一看一下。

JavaScript获取URL参数 (JavaScript Get URL Parameters)

方法1： (Method 1:)

First way is by using searchParams javascript method. This method is used to get value of particular variable.

第一种方法是使用searchParams javascript方法。 此方法用于获取特定变量的值。

var link = "http://www.steadyadvice.net/t.html?stack=hello&pop=data&link=hello";
var  extractParameter= new URL(link);
var  final = extractParameter.searchParams.get("link");
console.log(final);

You can get the current link by using window.location.href, just replace link variable string with this method.

您可以使用window.location.href获得当前链接，只需使用此方法替换链接变量字符串即可。

方法2： (Method 2:)

Another way is by using split method.

另一种方法是使用拆分方法。

var urlLink = 'http://www.steadyadvice.net/t.html?stack=hello&pop=data&link=hello';
var query_paramter = urlLink.split("?")[1];  
console.log(query_paramter);

方法3： (Method 3:)

The third way is by using the regular expression.

第三种方法是使用正则表达式。

function getUrlVars( name, link ) {
    if (!link) link = location.href;
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( url );
    return results == null ? 'Empty' : results[1];
}
 
console.log(getUrlVars('text', 'steadyadvice.net/?a=11&txt=world'));

In this method, I also handled that if at some instance parameter is missing then it returns undefined which is a bad coding practice. So to correct this we first check that particular parameter is present or not. If not present then send some default value.

在这种方法中，我还处理了如果在某些情况下缺少参数，则返回undefined的方法，这是不好的编码习惯。 因此，要纠正此问题，我们首先要检查是否存在特定参数。 如果不存在，则发送一些默认值。

So there are some characters that can not pass through URL like suppose we write a space in the link and press enter key then space will be replaced by %20code. So it is also important to encode and decode the URL parameters. There are the following functions you can use to do this. In these functions, you have to pass URL string.

因此，有些字符无法通过URL，例如假设我们在链接中写了一个空格，然后按Enter键，那么空格将被％20code替换。 因此，对URL参数进行编码和解码也很重要。 您可以使用以下功能来执行此操作。 在这些函数中，您必须传递URL字符串。

To decode use decodeURI(urlValue) and to encode use encodeURI(urlValue).

要解码，请使用decodeURI(urlValue)，并进行编码，请使用encodeURI(urlValue)。

Comment down below if you know any other way to fetch url parameters in javascript.

如果您知道以其他方式获取JavaScript中的url参数的其他方法，请在下面进行注释。

翻译自: https://www.thecrazyprogrammer.com/2019/12/javascript-get-url-parameters.html