js如何获取当前网页的url信息

原⽣JS获取URL链接参数的⼏种常见⽅法前⾔作为⼀个前端开发，我们很多时候都需要对URL进⾏操作和处理，最常见的⼀种就是获取URL链接中携带的参数值了。

使⽤框架开发的⼩伙伴可能会觉得这很简单，因为框架提供了很多⽅法让我们⽅便的获取URL链接携带的参数。

但是有些时候我们不能依赖框架，需要我们使⽤原⽣JS去获取参数，这也是⾯试中经常遇到的⼀道题。

今天我们就⼿撕代码，利⽤原⽣JS去获取URL链接参数值。

1. 获取⽅式总结利⽤原⽣JS获取URL链接参数的⽅法也有好⼏种，今天我们依次来讲解常见的⼏种：通过正则匹配的⽅式利⽤a标签内置⽅法利⽤split⽅法分割法使⽤URLSearchParams⽅法2. 具体实现⽅法2.1 正则匹配法这是⾮常中规中举的⼀种⽅法，重点是要求我们要懂正则表达式。

代码如下：<script>// 利⽤正则表达式let url = "?name=elephant&age=25&sex=male&num=100"// // 返回参数对象function queryURLParams(url) {let pattern = /(\w+)=(\w+)/ig; //定义正则表达式let parames = {}; // 定义参数对象url.replace(pattern, ($, $1, $2) => {parames[$1] = $2;});return parames;}console.log(queryURLParams(url))</script>上段代码中重点是正则表达式的定义以及replace⽅法的使⽤,其中$2分别代表name=elephant、name、elephant，以此类推。

replace结合正则更加详细的使⽤⽅法可以⾃⾏下去学习。

实现效果：2.2 利⽤a标签这种⽅法较少⼈使⽤，因为毕竟有点⿊科技的意思在⾥⾯。

js获取url参数方法在前端开发中，经常需要获取URL中的参数。

这些参数能够提供有关当前页面的重要信息，例如用户ID或者搜索关键词。

在JavaScript中获取URL参数的方法有很多，下面是常用的几种方法： 1. 使用location对象在JavaScript中，可以使用location对象获取当前URL的所有信息，包括参数。

location.search属性返回URL中的查询字符串部分，即“?”后面的内容。

通过字符串截取和正则表达式匹配可以获取参数的值。

示例代码如下：```function getUrlParam(name) {var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); var r = window.location.search.substr(1).match(reg);if (r != null) return unescape(r[2]);return null;}// 使用方法var userId = getUrlParam('userId');```2. 使用URLSearchParams对象URLSearchParams是一个新的Web API，用于解析和操作URL中的查询字符串。

通过URLSearchParams对象可以轻松获取和设置URL 参数。

示例代码如下：```var searchParams = newURLSearchParams(window.location.search);var userId = searchParams.get('userId');```3. 使用jQuery库如果项目中已经引入了jQuery库，可以使用它提供的便捷方法获取URL参数。

jQuery库提供了$.param()函数将URL参数转化为对象，$.getUrlParam()函数可以方便地获取URL参数的值。

js如何准确获取当前页⾯url⽹址信息在WEB开发中，时常会⽤到javascript来获取当前页⾯的url⽹址信息，在这⾥是我的⼀些获取url信息的⼩总结。

1、window.location.href(设置或获取整个 URL 为字符串)2、window.location.protocol(设置或获取 URL 的协议部分)var test = window.location.protocol;alert(test);返回：http:3、window.location.host(设置或获取 URL 的主机部分)var test = window.location.host;alert(test);返回：4、window.location.port(设置或获取与 URL 关联的端⼝号码)var test = window.location.port;alert(test);返回：空字符(如果采⽤默认的80端⼝(update:即使添加了:80)，那么返回值并不是默认的80⽽是空字符)5、window.location.pathname(设置或获取与 URL 的路径部分（就是⽂件地址）)var test = window.location.pathname;alert(test);返回：/EditPosts.aspx6、window.location.search(设置或获取 href 属性中跟在问号后⾯的部分)var test = window.location.search;alert(test);返回：?opt=1PS：获得查询（参数）部分，除了给动态语⾔赋值以外，我们同样可以给静态页⾯，并使⽤javascript来获得相信应的参数值。

7、window.location.hash(设置或获取 href 属性中在井号“#”后⾯的分段)var test = window.location.hash;alert(test);返回：空字符(因为url中没有)8、js获取url中的参数值⼀、正则法function getQueryString(name) {var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');var r = window.location.search.substr(1).match(reg);if (r != null) {return unescape(r[2]);}return null;}// 这样调⽤：alert(GetQueryString("参数名1"));alert(GetQueryString("参数名2"));alert(GetQueryString("参数名3"));⼆、split拆分法function GetRequest() {var url = location.search; //获取url中"?"符后的字串var theRequest = new Object();if (url.indexOf("?") != -1) {var str = url.substr(1);strs = str.split("&");for(var i = 0; i < strs.length; i ++) {theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);}}return theRequest;}var Request = new Object();Request = GetRequest();<br>// var id=Request["id"];// var 参数1,参数2,参数3,参数N;// 参数1 = Request['参数1'];// 参数2 = Request['参数2'];// 参数3 = Request['参数3'];// 参数N = Request['参数N'];三、指定取function GetQueryString(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");var r = window.location.search.substr(1).match(reg); //获取url 中"?"符后的字符串并正则匹配var context = "";if (r != null)context = r[2];reg = null;r = null;return context == null || context == "" || context == "undefined" ? "" : context;}alert(GetQueryString("j"));四、单个参数的获取⽅法function GetRequest() {var url = location.search; //获取url 中"?"符后的字串if (url.indexOf("?") != -1) { //判断是否有参数var str = url.substr(1); //从第⼀个字符开始 因为第0个是?号 获取所有除问号的所有符串strs = str.split("="); //⽤等号进⾏分隔 （因为知道只有⼀个参数 所以直接⽤等号进分隔 如果有多个参数 要⽤&号分隔 再⽤等号进⾏分隔） alert(strs[1]); //直接弹出第⼀个参数 （如果有多个参数 还要进⾏循环的）}}⼀、正则法⼆、split 拆分法1234567891011121314function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); var r = window.location.search.substr(1).match(reg); if (r != null ) { return unescape(r[2]); } return null ;}// 这样调⽤：alert(GetQueryString("参数名1"));alert(GetQueryString("参数名2"));alert(GetQueryString("参数名3"));12345678910111213141516171819function GetRequest() { var url = location.search; //获取url 中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for (var i = 0; i < strs.length; i ++) { theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]); } } return theRequest;}var Request = new Object();Request = GetRequest();<br>// var id=Request["id"];// var 参数1,参数2,参数3,参数N;// 参数1 = Request['参数1'];// 参数2 = Request['参数2'];// 参数3 = Request['参数3'];// 参数N = Request['参数N'];三、指定取四、单个参数的获取⽅法如果有多个参数要⽤&号分隔再⽤等号进⾏。

js取路径的方法在JavaScript中，您可以使用以下方法来获取路径：1. 使用window.location对象您可以使用window.location对象来获取当前文档的路径信息。

例如，要获取完整的URL路径，可以使用`window.location.href`。

如果只想获取路径部分而不包括协议和域名，可以使用`window.location.pathname`。

示例：javascriptconsole.log(window.location.href); // 输出完整的URL路径console.log(window.location.pathname); // 输出路径部分2. 使用document对象您还可以使用document对象来获取当前文档的路径信息。

通过document对象的属性可以获得URL的各个部分。

示例：javascriptconsole.log(document.URL); // 输出完整的URL路径console.log(document.location.href); // 输出完整的URL路径（与document.URL相同）console.log(document.location.pathname); // 输出路径部分3. 使用location对象JavaScript还提供了一个location对象，它包含了有关当前页面的URL信息。

通过location对象，您可以获取路径、搜索参数、哈希等信息。

示例：javascriptconsole.log(location.href); // 输出完整的URL路径console.log(location.pathname); // 输出路径部分这些是在JavaScript中获取路径信息的常用方法。

根据您的具体需求，选择适合的方法来获取路径。

js如何获取url参数，拼接url参数1、通过字符串截取的⽅式获取参数值；(注意location.search截取“？”后的字符串，该⽅法只适⽤于通过链接跳转的路径，如果是直接截取路径则返回空值，因此应该加上判断)1 /**2 * [获取URL中的参数名及参数值的集合]3 * ⽰例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&username=张三6 */7 function GetRequest(urlStr) {//两种⽅式，输⼊链接获取或当前链接获取8 if (typeof urlStr == "undefined") {9 var url = decodeURI(location.search); //获取url中"?"符后的字符串10 } else {11 var url = "?" + urlStr.split("?")[1];12 }13 var theRequest = new Object();14 if (url.indexOf("?") != -1) {15 var str = url.substr(1);//去掉问号，问号为第⼀个字符16 strs = str.split("&");17 for (var i = 0; i < strs.length; i++) {18 theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);19 }20 }21 return theRequest;22 }下⾯我们看⼀下结果：1 var parms_1 = GetRequest();2 console.log(parms_1); // {"uid":"admin","rid":"1","fid":"2","name":"张三"}3 console.log(parms_1['name']); // '张三'4 var parms_2 = GetRequest('http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=张三');5 console.log(parms_2); // {"uid":"admin","rid":"1","fid":"2","name":"张三"}6 console.log(parms_2['name']); // '张三'2、通过参数名获取url中的参数值1 /**2 * [通过参数名获取url中的参数值]3 * ⽰例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=张三6 */7 function GetQueryValue(queryName) {8 var query = decodeURI(window.location.search.substring(1));//将url转码，如果不是当前地址链接，可以在这⾥填写需要的链接9 var vars = query.split("&");//分割字符串，将url切割成数组形式的对象10 for (var i = 0; i < vars.length; i++) {11 var pair = vars[i].split("=");//再次分割成数组12 if (pair[0] == queryName) { return pair[1]; }//如果匹配输出结果13 }14 return null;15 }看⼀下结果：1 var queryVal=GetQueryValue('name');2 console.log(queryVal);// 张三3、通过正则获取到参数值；1 /**2 * [通过参数名获取url中的参数值]3 * ⽰例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=张三6 */7 function GetQueryValue1(queryName) {8 var reg = new RegExp("(^|&)" + queryName + "=([^&]*)(&|$)", "i");9 var r = window.location.search.substr(1).match(reg);10 if ( r != null ){11 return decodeURI(r[2]);12 }else{13 return null;14 }15 }看⼀下结果：1 var queryVal=GetQueryValue1('name');2 console.log(queryVal);// 张三。

js 获取url的方法JavaScript是一种常用的编程语言，用于实现网页的交互和动态效果。

在网页开发中，经常需要获取URL，也就是当前网页的地址。

以下是几种常见的获取URL的方法。

方法一：使用window.location对象window.location对象包含了当前网页的URL信息，可以通过它来获取URL的各部分。

获取完整URL：```javascriptvar url = window.location.href;```获取主机名（域名）：```javascriptvar hostname = window.location.hostname;```获取路径名：```javascriptvar pathname = window.location.pathname;```获取查询字符串（参数）部分：```javascriptvar search = window.location.search;```获取哈希值（锚点）部分：```javascriptvar hash = window.location.hash;```方法二：使用document.URL属性document.URL属性返回当前网页的完整URL，可以直接使用它来获取URL。

```javascriptvar url = document.URL;```方法三：使用location.href属性location.href属性返回当前网页的完整URL，也可以直接使用它来获取URL。

```javascriptvar url = location.href;```以上是几种常见的获取URL的方法。

根据具体需求选择合适的方法即可。

js解析url参数的方法在计算机网络的通信中，URL（Uniform Resource Locator）是一种指定Web资源的统一方式，它是由字符串形式表达的一组字符，通常用来指向Internet上的文件，但它也可以指向其他协议的资源，比如文件传输协议(FTP)、简单邮件传输协议(SMTP)等。

通常，URL会包括一些附加的参数，这些参数保存在URL中，用于提供服务器信息、用户验证、参数传递等。

在本文中，我们将学习如何使用JavaScript来解析URL参数。

1.取URL要解析URL参数，首先需要获取URL完整字符串。

JavaScript 中的window.location对象的href属性可以获取当前URL，该属性可以返回从协议到hashTag之间的完整URL字符串。

2.析地址使用JavaScript可以使用以下两种方法解析URL参数：（1）使用URLSearchParams对象URLSearchParams对象可以解析URL参数，它是JavaScript标准库中的一个对象，可以通过URLSearchParams构造函数来创建URLSearchParams对象，并将URL的search部分传入构造函数。

（2）使用正则表达式我们也可以使用正则表达式来解析URL参数，正则表达式可以帮助我们提取URL引用的参数和值，也可以帮助我们对URL进行更复杂的处理。

3.理参数其次，我们要对提取出来的参数进行处理，可以使用JavaScript 自带的String对象的split()方法，此方法可以根据指定的分隔符，将字符串分割成数组，这里我们将其作为参数key-value的分隔符。

4.回参数最后，我们可以将处理完毕的参数返回，可以使用一个JavaScript对象来保存参数，然后将对象返回即可。

以上就是使用JavaScript解析URL参数的方法。

使用此方法能够更加轻松地解析URL中的参数和值，从而更高效地使用参数。

静态页面获取url参数并显示的方法静态页面获取URL参数并显示的方法在Web开发中，经常会涉及到从URL中获取参数的需求，例如在搜索引擎中搜索商品时，需要在URL中传入关键字参数来搜索特定的商品。

那么，在静态页面中如何获取URL参数并进行对应的操作呢？接下来，将为您介绍几种静态页面获取URL参数并显示的方法。

方法一：使用JavaScript在JavaScript中，可以使用window.location.search方法来获取URL中的查询参数，如下所示：``` var urlParams = newURLSearchParams(window.location.search); var id = urlParams.get('id'); var name =urlParams.get('name');// 在页面中显示参数值document.getElementById("id").innerHTML = id; document.getElementById("name").innerHTML = name; ```在示例中，使用了URLSearchParams对象来获取URL 中的查询参数，并使用get()方法来获取指定参数的值。

可以在获取参数值后，通过getElementById()方法来获得显示参数的HTML元素ID，并将参数值显示在页面中。

方法二：使用jQuery如果你熟悉jQuery的话，可以使用jQuery来获取URL参数，并在页面中显示该参数的值。

如下所示：``` var id = $.urlParam('id'); var name =$.urlParam('name');// 在页面中显示参数值 $("#id").html(id); $("#name").html(name); ```在示例中，使用了jQuery的插件$.urlParam()方法来获取指定参数的值，并使用html()方法来将参数值显示在页面中。

详解javascript获取url信息的常见⽅法1、获取页⾯完整的urlvar a=location.href;console.log(a);　// “/wuxibolgs329/p/5261577.html#flag?test=12345”2、获取页⾯的域名var host = window.location.host; //var host2 = document.domain; //var a = location.hostname; //3、获取url协议var a=location.protocol;console.log(a);　//http:4、获取端⼝var a=location.port;console.log(a);5、获取页⾯路径var a=location.pathname;console.log(a);6、设置或获取 URL 的协议部分var a = location.protocol;7、获取#后的部分var a=window.location.hash;var b=a.substr(1);console.log(b);　// flag?test=123458、获取 href 属性中跟在问号?后⾯的部分// 此时案例地址变为“/wuxibolgs329/p/5261577.html?test=12345”。

得到 test=12345var a=location.search;var b=a.substr(1);console.log(b);　//如果案例依旧是“/wuxibolgs329/p/5261577.html#flag?test=12345”，则需下⾯的写法，得到 test=12345var a=location.href;var b=a.substr(stIndexOf('?')+1);console.log(b);9、获取 = 号后⾯的部分var a=location.href;var b=a.substring(stIndexOf('=')+1);console.log(b); // 12345以上就是本⽂的全部内容，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，同时也希望多多⽀持！。

js获取当前页⾯路径⽰例讲解设置或获取对象指定的“⽂件名”或路径。

<script>alert(window.location.pathname)</script>设置或获取整个 URL 为字符串。

<script>alert(window.location.href);</script>设置或获取与 URL 关联的端⼝号码。

<script>alert(window.location.port)</script>设置或获取 URL 的协议部分。

<script>alert(window.location.protocol)</script>设置或获取 href 属性中在井号“#”后⾯的分段。

<script>alert(window.location.hash)</script>设置或获取 location 或 URL 的 hostname 和 port 号码。

<script>alert(window.location.host)</script>设置或获取 href 属性中跟在问号后⾯的部分。

<script>alert(window.location.search)</script>⽹页刷新推荐-JS<input type=button value=刷新 onclick="history.go(0)"><input type=button value=刷新 onclick="location.reload()"><input type=button value=刷新 onclick="location=location"><input type=button value=刷新 onclick="location.assign(location)"><input type=button value=刷新 onclick="document.execCommand('Refresh')"><input type=button value=刷新 onclick="window.navigate(location)"><input type=button value=刷新 onclick="location.replace(location)"><input type=button value=刷新 onclick="document.URL=location.href">。