【前端100問】Q87：在輸入框中如何判斷輸入的是一個正確的網址。

寫在前面

此係列來源於開源項目：前端 100 問：能搞懂 80%的請把簡歷給我
爲了備戰 2021 春招
每天一題，督促自己
從多方面多角度總結答案，豐富知識
在輸入框中如何判斷輸入的是一個正確的網址。
簡書整合地址：前端 100 問

正文回答

const isUrl = (urlStr) => {
  try {
    const { href, origin, host, hostname, pathname } = new URL(urlStr);
    return href && origin && host && hostname && pathname && true;
  } catch (e) {
    return false;
  }
};

// vue-element-admin 上面的方法
function validURL(url) {
  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
  return reg.test(url);
}