在JavaScript中检测和判断链接通常涉及以下几个方面:
URL
构造函数,可以用来解析和操作URLs。<a>
标签。mailto:
协议的链接。function isValidUrl(string) {
try {
new URL(string);
return true;
} catch (_) {
return false;
}
}
console.log(isValidUrl('https://www.example.com')); // true
console.log(isValidUrl('invalid-url')); // false
function isValidUrl(string) {
const regex = /^(http|https):\/\/[^ "]+$/;
return regex.test(string);
}
console.log(isValidUrl('https://www.example.com')); // true
console.log(isValidUrl('invalid-url')); // false
function getLinkType(url) {
try {
const urlObj = new URL(url);
if (urlObj.protocol === 'mailto:') {
return 'email';
} else if (urlObj.hostname === window.location.hostname) {
return 'internal';
} else {
return 'external';
}
} catch (_) {
return 'invalid';
}
}
console.log(getLinkType('https://www.example.com')); // external
console.log(getLinkType('mailto:someone@example.com')); // email
console.log(getLinkType('/about')); // internal
原因:可能是正则表达式不够严格或者URL对象无法解析某些特殊格式的链接。
解决方法:使用更精确的正则表达式,或者结合URL对象和正则表达式进行双重验证。
解决方法:可以使用URL
对象结合当前页面的URL来解析相对链接。
function resolveUrl(base, relative) {
return new URL(relative, base).href;
}
console.log(resolveUrl('https://www.example.com', '/about')); // https://www.example.com/about
通过上述方法,你可以有效地检测和判断链接的有效性、类型,并处理各种常见的链接相关问题。
领取专属 10元无门槛券
手把手带您无忧上云