如何用js獲取瀏覽器URL中查詢字符串的參數

首先要知道Location這個對象以及這個對象中的一些屬性:

href:設置或返回完整的url.如本博客首頁返回http://www.cnblogs.com/wymninja/

host:設置或返回主機名和當前的URL的端口號。本博客首頁返回www.cnblogs.com

hostname:設置或返回當前URL的主機名。本博客首頁返回www.cnblogs.com

hash:設置或返回從井號(#)開始的URL(錨)。本博客首頁返回 空

pathname:設置或返回當前URL的路徑部分。本博客首頁返回/wymninja/

port:設置或返回當前URL的端口號。本博客首頁返回 空

protocol:設置或返回當前URL的協議。本博客首頁返回 http:

search:設置或返回從問號 (?) 開始的 URL(查詢部分)

location對象屬性圖示:圖片來自慕課網

location的href屬性存放的是文檔的完整 URL,其他屬性則分別描述了 URL 的各個部分。這些屬性與 Anchor 對象(或 Area 對象)的 URL 屬性非常相似。當一個 Location 對象被轉換成字符串,href 屬性的值被返回。這意味著你可以使用表達式 location 來替代 location.href。不過 Anchor 對象表示的是文檔中的超鏈接,Location 對象表示的卻是瀏覽器當前顯示的文檔的 URL(或位置)

var s = location.toString();
console.log(s);
#result
//http://www.cnblogs.com/wymninja/

?

Location對象的這些屬性都是可讀可寫的,如果改變了文檔的location.href,則瀏覽器會載入新的頁面。同樣如果改變了location.hash,則頁面會跳轉到新的錨點,但此時頁面不會重載。

Location對象還有三個方法:assign()、reload()、replace()

assign():加載新的文檔

reload():可以重新裝載當前文檔

replace():可以裝載一個新文檔而無須為它創建一個新的歷史記錄。也就是說,在瀏覽器的歷史列表中,新文檔將替換當前文檔。這樣就不能通過【返回】按鈕返回當前文檔了。

注意:

不要混淆Window對象的location屬性和Document對象的location對象。前者引用一個Location對象,后者只是一個 只讀字符串,并不具有Location對象的任何特性。Document.location與document.URL是同義的。但是,當存在服務器重定 向時,document.location包含的是已經裝載的URL,而location.href包含的則是原始請求的文檔的URL。

所以要獲取瀏覽器URL中查詢字符串的參數。也就是location.search部分。以慕課網圖片為例就是?courseid = 8&cahpterid?= 86中的8和86!!!!然后就利用如下代碼:

function getQuery(name){var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);//從?之后開始匹配如getQuery(courseid)返回一個數組["courseid=8","","8","&",index:0,input:"courseid=8"]
if (r!=null) return unescape(r[2]); return null; }

其中:

對match不清楚可查閱我的博客Javascript string對象

unescape 對參數進行解碼,如空格解碼為20%。

轉載于:https://www.cnblogs.com/wenJiaQi/p/6359210.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/393985.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/393985.shtml
英文地址,請注明出處:http://en.pswp.cn/news/393985.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

測試無服務器應用程序的最佳方法

Serverless is more than a cloud computing execution model. It changes the way we plan, build, and deploy apps. But it also changes the way we test our apps.無服務器不僅僅是云計算執行模型。 它改變了我們計劃,構建和部署應用程序的方式。 但這也改變了…

nginx反向代理打印日志_nginx啟用TCP反向代理日志配置

Nginx使用TCP反向代理日志配置不同于http修改nginx配置文檔/usr/local/nginx/conf/nginx.conf 設置日志格式stream {log_format proxy ‘$remote_addr [$time_local] ‘‘$protocol $status $bytes_sent $bytes_received ‘‘$session_time "$upstream_addr" ‘‘&qu…

計算機系統的數制及轉換

1、計算機的數制介紹 數制:計數的方法,指用一組固定的符號和統一的規則來表示數值的方法 數位:指數字符號在一個數中所處的位置 基數:指在某種進位計數制中,數位上所能使用的數字符號的個數 位權:指在某種進…

29. ExtJs - Struts2 整合(1) - 登錄頁面

轉自:https://yarafa.iteye.com/blog/729197 初學 ExtJS,在此記錄下學習過程中的點點滴滴,以備不時只需,也希望能給跟我一樣的菜鳥一些幫助,老鳥請忽略。如有不當之處,歡迎指正。 開發環境: MyE…

leetcode690. 員工的重要性(bfs)

給定一個保存員工信息的數據結構,它包含了員工唯一的id,重要度 和 直系下屬的id。 比如,員工1是員工2的領導,員工2是員工3的領導。他們相應的重要度為15, 10, 5。那么員工1的數據結構是[1, 15, [2]],員工2的數據結構是…

如何使用Webpack 4簡化React.js開發過程

by Margarita Obraztsova瑪格麗塔(Margarita Obraztsova) 如何使用Webpack 4簡化React.js開發過程 (How to streamline your React.js development process using Webpack 4) In the real world of development, we have to add new features very quickly. In this tutorial,…

HDU - 3247 Resource Archiver (AC自動機,狀壓dp)

\(\quad\)Great! Your new software is almost finished! The only thing left to do is archiving all your n resource files into a big one.\(\quad\)Wait a minute… you realized that it isn’t as easy as you thought. Think about the virus killers. They’ll find …

space index.php 7-14,disk_free_space()

disk_free_space()(PHP 4 > 4.1.0, PHP 5, PHP 7)返回目錄中的可用空間說明disk_free_space(string$directory):float給出一個包含有一個目錄的字符串,本函數將根據相應的文件系統或磁盤分區返回可用的字節數。參數$directory文件系統目錄或者磁盤分區。Note:如果…

云專網和云專線的區別_企業更適合互聯網專線還是云專線聯網?

隨著云計算、移動應用及全球化的發展,縱橫企業專網20年的MPLS專線弊端逐漸暴露,MPLS專線越來越難以滿足企業的業務發展需求,而云計算、SaaS及移動應用具有天然的互聯網屬性。為什么“互聯網”可以取代專線?互聯網的持續發展,為取…

composer安裝thinkphp

https://getcomposer.org/Composer-Setup.exe 正常安裝composer以后,執行composer create-project topthink/thinkphp myapp安裝thinkphp.轉載于:https://www.cnblogs.com/lijurui/p/6362012.html

wordpress 插件_如何為您的Web應用程序創建WordPress插件

wordpress 插件by Feedier by Alkalab由Feedier通過Alkalab 如何為您的Web應用程序創建WordPress插件 (How to create a WordPress plugin for your web app) Today, we are going to see how to create a very simple WordPress plugin for any web app that needs to insert…

Android 軟鍵盤相關問題

1. windowSoftInputMode屬性的使用 Android使用windowSoftInputMode來控制Activity 的主窗口與包含屏幕軟鍵盤的窗口的交互方式。 該屬性的設置影響兩個方面: 當 Activity 成為用戶注意的焦點時軟鍵盤的狀態 — 隱藏還是可見。對 Activity 主窗口所做的調整 — 是否…

git php框架,如何用Git安裝TP框架

本篇文章主要給大家介紹如何用Git安裝Thinkphp框架。關于TP框架的安裝,想必大家都知道較為常見的方式是通過composer安裝tp框架。首先簡單的給大家介紹下Git和TP框架。Git是一個開源的分布式版本控制系統,可以快速,高效地處理從小型到大型項目…

C#EF中,使用類似于SQL中的% 模糊查詢

最近在做項目的時候需要使用到模糊查詢,但是后臺使用EF寫的 而不是ADO或者是Dapper,如果是這樣的話,我們就可以使用Sql語句直接進行模糊查詢 現在我們需要在LINQ中使用類似于模糊查詢 在EF中有兩個方法:StartsWith()和EndWith() StartsWith(): 在轉到定義時 我們可以看見,這個方…

android toast居中顯示_Android Toast 設置到屏幕中間,自定義Toast的實現方法,及其說明...

Android Toast用于在手機屏幕上向用戶顯示一條信息,一段時間后信息會自動消失。信息可以是簡單的文本,也可以是復雜的圖片及其他內容(顯示一個view)。1.簡單用法Toast.makeText(midlet.getApplicationContext(), "用戶名不能為空", Toast.LENG…

leetcode103. 二叉樹的鋸齒形層次遍歷(bfs)

給定一個二叉樹,返回其節點值的鋸齒形層次遍歷。(即先從左往右,再從右往左進行下一層遍歷,以此類推,層與層之間交替進行)。例如: 給定二叉樹 [3,9,20,null,null,15,7],3/ \9 20/ \15 7 返回…

LintCode Find the Weak Connected Component in the Directed Graph

原題鏈接在這里:http://www.lintcode.com/en/problem/find-the-weak-connected-component-in-the-directed-graph/ 題目: Find the number Weak Connected Component in the directed graph. Each node in the graph contains a label and a list of its…

簡單了解tengine

Tengine是由淘寶網發起的Web服務器項目。它在Nginx的基礎上,針對大訪問量網站的需求,添加了很多高級功能和特性。最終目標是打造一個高效、穩定、安全、易用的Web平臺。1、基本的HTTP服務器特性1.處理靜態文件,索引文件以及自動索引&#xff…

服務器創建多個dhcp服務_如何在15分鐘內創建無服務器服務

服務器創建多個dhcp服務by Charlee Li通過李李 如何在15分鐘內創建無服務器服務 (How to create a serverless service in 15 minutes) The word “serverless” has been popular for quite a while. When Amazon released the AWS Lambda service in 2015, many tools emerg…

php snoopy視頻教程,php的Snoopy類

用了兩天這個類,發現很好用。獲取請求網頁里面的所有鏈接,直接使用fetchlinks就可以,獲取所有文本信息使用fetchtext(其內部還是使用正則表達式在進行處理),還有其它較多的功能,如模擬提交表單等。使用方法&#xff1a…