一道 算法題 引起的 ‘xx現場’

請 熟悉的語言 去 驗證 在輸入框中輸入的是不是一個正確的網址

初次讀題萌新有點 不知所措的樣子

一查 MDN 嚇一跳 ----- 一個不怎麼熟悉的方法跳出眼邊

URL() 

構造函數返回一個新建立的 URL 對象，表示由一組參數定義的 URL。

不知道會不會想到一種方法：

function isUrl(url) {
  try {
    new URL(url)
    return true
  } catch(err) {
    return false
  }
}

彷佛是否是不太好呢？ 咱們能夠想一想 涉及到 url 相關的知識點

知識點開始了：

hash: 包含'#'的USVString，後跟URL的片斷標識符。

host: 一個USVString，其中包含域（即主機名），後跟（若是指定了端口）「：」和URL的端口。

hostname: 包含 URL 域名的 USVString。

href: 包含完整 URL 的 USVString。

origin: 返回一個包含協議名、域名和端口號的 USVString。（只讀）

password: 包含在域名前面指定的密碼的 USVString 。

pathname: 以 '/' 起頭緊跟着 URL 文件路徑的 DOMString。

port: 包含 URL 端口號的 USVString。

protocal: 包含 URL 協議名的 USVString，末尾帶 ':'。

search: 一個USVString ，指示URL的參數字符串； 若是提供了任何參數，則此字符串包括全部參數，並以開頭的「？」開頭 字符。

searchParams: URLSearchParams對象，可用於訪問search中找到的各個查詢參數。（只讀）

username: 包含在域名前面指定的用戶名的 USVString。

上面搞了一堆頭疼的知識點，可是沒有辦法啊，咱們仍是會在平常的工做中會接觸到他們的

先開始上正菜了：

const isUrl = urlStr => {
  try {
      const { href, origin, host, hostname, pathname } = new URL(urlStr)
      console.log(href, origin, host, hostname, pathname)
      // isUrl('http://localhost:8080/customReport/dashboard/15')   
      // https://developer.mozilla.org/zh-CN/docs/Web/API/URL
      // http://localhost:8080/customReport/dashboard/15   http://localhost:8080   localhost:8080   localhost   /customReport/dashboard/15


      // https://router.vuejs.org/zh/guide/#javascript   https://router.vuejs.org   router.vuejs.org   router.vuejs.org   /zh/guide/
      return href && origin && host && hostname && pathname && true
  } catch (e) {
      return false
  }
}

具體的東西看代碼就明白了，記得不知道，上面查一下就懂了，

晚安。