第 87 题：在输入框中如何判断输入的是一个正确的网址

[yygmind]

第 87 题：在输入框中如何判断输入的是一个正确的网址

[lhyt]

不上正则，一个简单的玩法

function isUrl(url) {
	const a = document.createElement('a')
	a.href = url
	return [
		/^(http|https):$/.test(a.protocol),
		a.host,
		a.pathname !== url,
		a.pathname !== `/${url}`,
	].find(x => !x) === undefined
}

[andyliangshan]

var reg=/^([hH][tT]{2}[pP]://|[hH][tT]{2}[pP][sS]://)(([A-Za-z0-9-]+).)+([A-Za-z0-9-/])+$/;
reg.test(document.querySelector('input').value);

[IdeaEcho]

不上正则，一个简单的玩法

function isUrl(url) {
	const a = document.createElement('a')
	a.href = url
	return [
		/^(http|https):$/.test(a.protocol),
		a.host,
		a.pathname !== url,
		a.pathname !== `/${url}`,
	].find(x => !x) === undefined
}

可以问一下吗？a.pathname !== /${url} 这个没理解

[lhyt]

不上正则，一个简单的玩法

function isUrl(url) {
	const a = document.createElement('a')
	a.href = url
	return [
		/^(http|https):$/.test(a.protocol),
		a.host,
		a.pathname !== url,
		a.pathname !== `/${url}`,
	].find(x => !x) === undefined
}

可以问一下吗？a.pathname !== /${url} 这个没理解

输入/a 和 输入 a，不算完整网站。但是pathname都是/a

[chenshengshui]

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

[ovarte]

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

[halionn]

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

[SuAgnes]

 /^(https?:\/\/)?([a-z0-9]\.|[a-z0-9][-a-z0-9]*[a-z0-9]\.)*([a-z]+)(:\d+)?(\/.*)?$/;

[wulichenyang]

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

可能还需要检查一下protocol是http|https

[yuwanli]

/^(?:(https?):)?(?:\/\/)?([^\/?#:]+)?(?::(\d+))?([^?#]*)(?:\?([^#]*))?(?:#(.*))?$/

[CC712]

what is a URL from MDN
补个资料。
思路应该是对 URL的组成部分 分别进行校验

• protocol
• domain name
• port
• path （不用校验）
• params
• anchor （不用校验）

[yaodongyi]

let url = 'https://www.baidu.com';
function searchUrl(url) {
    try {
        if (new URL(url) && (new URL(url).protocol === "http:" || new URL(url).protocol === "https:") && url.match(new RegExp(new URL(url).protocol + "//")).index === 0) return true
    } catch (err) {
        console.log("不是一个正确的网址");
    }
};
console.log(searchUrl(url))

[chenyueyun]

stackoverflow上的：

(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]

[luotaiqiang]

不上正则，一个简单的玩法

function isUrl(url) {
	const a = document.createElement('a')
	a.href = url
	return [
		/^(http|https):$/.test(a.protocol),
		a.host,
		a.pathname !== url,
		a.pathname !== `/${url}`,
	].find(x => !x) === undefined
}

@lhyt
isUrl("ww......") //true测试一下就不对

[NARUTOne]

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

URL() IE下不兼容

[lovetingyuan]

const a = document.createElement('input')
a.type = 'url'
a.value = '..'
a.checkValidity() // false, 

不推荐用于精确判断的场景

[yuanxiang1990]

/^(http(s)?://)?([\w-]+.)?[\w-]+.[\w-]+(?[\w-]+=[\w-]+(&[\w-]+=[\w-_]+)*)?$/

[flygo996]

[serializedowen]

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

这个本来就是合法url

[Hydroism]

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)
}

vue-element-admin 上面的方法

[yeyuguo]

let url = 'https://www.baidu.com';
function searchUrl(url) {
    try {
        if (new URL(url) && (new URL(url).protocol === "http:" || new URL(url).protocol === "https:") && url.match(new RegExp(new URL(url).protocol + "//")).index === 0) return true
    } catch (err) {
        console.log("不是一个正确的网址");
    }
};
console.log(searchUrl(url))

这个代码看了我强迫症犯病