xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

URLSearchParams & Location & URL params parse

URL params parse

node.js env bug

node.js & ReferenceError: document is not defined

/*

题目描述
获取 url 中的参数
1. 指定参数名称，返回该参数的值 或者 空字符串
2. 不指定参数名称，返回全部的参数对象 或者 {}
3. 如果存在多个同名参数，则返回数组
示例1

输入 http://www.xgqfrms.xyz?key=1&key=2&key=3&test=4#hehe key

输出 [1, 2, 3]

*/

function getUrlParam(sUrl, sKey) {
  const log = console.log;
  const a = document.createElement('a');
  // node.js & ReferenceError: document is not defined
  a.href = sUrl;
  // a.href = `http://www.xgqfrms.xyz?key=1&key=2&key=3&test=4#hehe`;
  const searchParams = new URLSearchParams(a.search);
  if(sKey) {
    if(searchParams.has(sKey)) {
      const keys = searchParams.getAll(sKey);
      return keys.length > 1 ? keys : keys[0];
    } else {
      return "";
    }
  } else {
    const obj = {};
    for (const item of searchParams) {
      const [k, v] = item;
      obj[k] = v;
    }
    return obj;
  }
}

/*

getUrlParam(`http://www.xgqfrms.xyz?key=1&key=2&key=3&test=4#hehe`, `key`);
// ["1", "2", "3"]

getUrlParam(`http://www.xgqfrms.xyz?key=1&key=2&key=3&test=4#hehe`);
// {key: ["1", "2", "3"], test: ["4"]}

getUrlParam(`http://www.xgqfrms.xyz?key=1&key=2&key=3&test=4#hehe`, `test`);
// "4"

getUrlParam(`http://www.xgqfrms.xyz?key=1&key=2&key=3&test=4#hehe`, `shit`);
// ""

*/

URLSearchParams

The URLSearchParams constructor does not parse full URLs.

var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);

//Iterate the search parameters.
for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

Location

query string

// Create anchor element and use href property for the purpose of this example
// A more correct alternative is to browse to the URL and use document.location or window.location
const al = document.createElement('a');
a.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container';

// query string
console.log(a.search);    // ?q=URL

console.log(a.href);      // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
console.log(a.protocol);  // https:
console.log(al.host);      // developer.mozilla.org:8080
console.log(a.hostname);  // developer.mozilla.org
console.log(a.port);      // 8080
console.log(a.pathname);  // /en-US/search
console.log(a.hash);      // #search-results-close-container
console.log(al.origin);    // https://developer.mozilla.org:8080

https://developer.mozilla.org/en-US/docs/Web/API/Location

https://developer.mozilla.org/en-US/docs/Web/API/Window/location

https://developer.mozilla.org/en-US/docs/Web/API/Document/location

demo

https://www.nowcoder.com/practice/a3ded747e3884a3c86d09d88d1652e10?tpId=2&&tqId=10852&rp=1&ru=/ta/front-end&qru=/ta/front-end/question-ranking

function getUrlParam(sUrl, sKey) {
   const a = document.createElement('a');
   a.href = `http://www.nowcoder.com?key=1&key=2&key=3&test=4#hehe`;
}

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---