html擷取url後面的參數_JavaScript擷取頁面url參數

擷取頁面url的參數是一個很常見的需求，我也遇到過了很多次了。本文做下記錄。當然已經有了一個開源庫做了相關的工作

query-string​github.com

URLSearchParams

URL()

構造函數傳回一個新建立的

URL

對象，表示由一組參數定義的

URL

。

如果給定的基本 URL 或生成的 URL 不是有效的 URL 連結，則會抛出一個類型為 SYNTAX_ERROR 的 DOMException。

在

stackoverflow

上看到了一個方法，利用URL()。

var url_string = "http://www.example.com/t.html?a=1&b=3&c=m2-m3-m4-m5"; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("c");

# console.log(c);
"m2-m3-m4-m5"
           

如果是舊的浏覽器不支援的話

function parse_query_string(query) {
  var vars = query.split("&");
  var query_string = {};
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    var key = decodeURIComponent(pair[0]);
    var value = decodeURIComponent(pair[1]);
    // If first entry with this name
    if (typeof query_string[key] === "undefined") {
      query_string[key] = decodeURIComponent(value);
      // If second entry with this name
    } else if (typeof query_string[key] === "string") {
      var arr = [query_string[key], decodeURIComponent(value)];
      query_string[key] = arr;
      // If third or later entry with this name
    } else {
      query_string[key].push(decodeURIComponent(value));
    }
  }
  return query_string;
}

var query_string = "a=1&b=3&c=m2-m3-m4-m5";
var parsed_qs = parse_query_string(query_string);
console.log(parsed_qs.c);

var query = window.location.search.substring(1);
var qs = parse_query_string(query);
           

正則法

function GetQueryString(name)
{
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); return null;
}
 
// 調用方法
alert(GetQueryString("參數名1"));
alert(GetQueryString("參數名2"));
           

function gup( name, url ) {
    if (!url) url = location.href;
    name = name.replace(/[[]/,"[").replace(/[]]/,"]");
    var regexS = "[?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( url );
    return results == null ? null : results[1];
}
gup('q', 'hxxp://example.com/?q=abc')