如何检查 JavaScript 字符串是否为有效 URL（上）我们通常将 URL 称为网站地址，它们用于文件传输、电子邮

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第27天，点击查看活动详情

URL - 或统一资源定位器 - 是用于识别 Internet 上的网页、图像和视频等资源的文本。

我们通常将 URL 称为网站地址，它们用于文件传输、电子邮件和其他应用程序。

URL 由多个部分组成——协议、域名等——告诉浏览器如何以及在哪里检索资源。

在 JavaScript 中，你可能需要在锚标记或按钮中使用 URL 将用户链接到另一个网页。在这种情况下，必须验证此 URL 字符串以确保它是有效的 URL。

本教程将教你一些方法来检查 JavaScript 字符串是否为有效 URL。

要了解如何在 JavaScript 中获取当前 URL，你可以阅读这篇关于如何在 JavaScript 中获取当前 URL 的文章。

如何使用正则表达式检查字符串是否为有效 URL

正则表达式 (regex) 是匹配 JavaScript 字符串中的字符组合的模式。在 JavaScript 中，正则表达式也称为对象，它提供不同的方法来执行各种操作。

你可以通过两种方式构造正则表达式：

使用正则表达式文字
使用正则表达式构造函数

注意： 当你只想检查字符串是否为有效 URL 并且不希望创建任何其他附加对象时，使用正则表达式方法是合适的。

让我们了解这两种方法的工作原理。

如何使用正则表达式文字

在正则表达式文字中，模式包含在斜杠之间，如下所示。

该模式包括验证URL. 例如，协议、https、 a//等。

const urlPattern = /(?:https?)://(\w+:?\w*)?(\S+)(:\d+)?(/|/([\w#!:.?+=&%!-/]))?/;

如何使用正则表达式构造函数

要使用构造方法创建正则表达式，请使用RegExp()构造函数并将模式作为参数传递。

const urlPattern = new RegExp('(?:https?)://(\w+:?\w*)?(\S+)(:\d+)?(/|/([\w#!:.?+=&%!-/]))?');

为了演示如何验证字符串是否为URL，让我们创建一个方法，该方法将String使用正则表达式构造函数验证 JavaScript 并根据匹配的模式返回Trueor 。False

	const isValidUrl = urlString=> {
	  	var urlPattern = new RegExp('^(https?:\/\/)?'+ // validate protocol
	    '((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|'+ // validate domain name
	    '((\d{1,3}\.){3}\d{1,3}))'+ // validate OR ip (v4) address
	    '(\:\d+)?(\/[-a-z\d%_.~+]*)*'+ // validate port and path
	    '(\?[;&a-z\d%_.~+=-]*)?'+ // validate query string
	    '(\#[-a-z\d_]*)?$','i'); // validate fragment locator
	  return !!urlPattern.test(urlString);
	}

如何使用正则表达式验证 URL 字符串

下面的代码演示了如何使用上述方法验证不同的 URL 字符串：

		var url = "invalidURL";
	console.log(isValidUrl(url));      //false
	 
	var url = "htt//jsowl";            //false
	console.log(isValidUrl(url));
	
    var url = "www.jsowl.com";         //true
    console.log(isValidUrl(url));
    
    var url = "https://www.jsowl.com"; //true
    console.log(isValidUrl(url));
    
    var url = "https://www.jsowl.com/remove-an-item-from-an-array-in-javascript/";
    console.log(isValidUrl(url));      //true

如何使用 URL 构造函数检查字符串是否为有效 URL

你可以使用 URLConstructor 检查字符串是否为有效 URL。

URLConstructor ( new URL(url)) 返回由 URL 参数定义的新创建的 URL 对象。

TypeError如果给定的 URL 无效，则会引发JavaScript异常。

注意： 当你想在程序中构造一个 URL 对象以供进一步使用时，使用此方法是合适的。

URL 构造器语法

以下语法说明了如何使用 JavaScript 字符串创建 URL 对象。

new URL(url);
new URL(url, base);

在哪里，

url是一个字符串或任何带有表示绝对或相对 URL的字符串化符的对象。如果URL是绝对 URL，则应忽略base 。 如果URL是相对 URL，则需要base。
base（可选）是表示基本 URL 的字符串。当 URL 是相对的时，它必须被传递。忽略时默认为未定义。

URL构造方法示例

为了演示 URL 构造方法的工作原理，让我们在 JavaScript 中创建一个 lambda 函数，以使用传递的字符串构造一个新的 URL。

如果字符串是有效的 URL，则创建一个 URL 对象并true返回
如果 String 不是有效的 URL，Tyeperror则抛出异常并false返回

const isValidUrl = urlString=> {
      try { 
      	return Boolean(new URL(urlString)); 
      }
      catch(e){ 
      	return false; 
      }
  }

如何使用`isValidURL()`方法

让我们为不同的字符串类型调用该isValidURL()方法并查看结果。

  var url = "invalidURL";
  console.log(isValidUrl(url));     //false
  
  var url = "htt//jsowl";
  console.log(isValidUrl(url));     //false
  
  var url = "www.jsowl.com";
  console.log(isValidUrl(url));     //false
  
  var url = "tcp://www.jsowl.com";
  console.log(isValidUrl(url));     //true
  
  var url = "https://www.jsowl.com/remove-an-item-from-an-array-in-javascript/";
  console.log(isValidUrl(url));     //true

在前三种情况下，你可以看到传递了无效的 URL 字符串。 因此，URL 对象创建失败并返回 aTypeError并false返回。

在最后两种情况下，传递了有效的 URL 字符串。 所以一个URL对象被成功创建，并被True返回，确认正确的 URL。

让我们再看一个验证特定 URL 部分的示例。

在此示例中，你正在验证 URL 中的特定协议。URL 必须包含httporhttps协议。

	const isValidUrl = urlString=> {
		let url;
		try { 
	      	url =new URL(urlString); 
	    }
	    catch(e){ 
	      return false; 
	    }
	    return url.protocol === "http:" || url.protocol === "https:";
	}

如何验证部分 URL 的示例

让我们为不同的字符串类型和协议调用该isValidURL()方法并查看结果。

var url = "tcp://www.jsowl.com";
console.log(isValidUrl(url));      //false

var url = "https://www.jsowl.com";
console.log(isValidUrl(url));      //true

在第一种情况下，URL 字符串 (tcp://www.jsowl.com) 是有效的，但它不包含特定协议 ( HTTP/ HTTPS)。所以它返回false。

在第二种情况下，URL 字符串*www.jsowl.com是有效的并且包含特定的协议。所以它返回true*。

如何检查 JavaScript 字符串是否为有效 URL（上）