一道 算法题 引起的 ‘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
  }
}

具体的东西看代码就明白了，记得不知道，上面查一下就懂了，

晚安。