如何检查一个JavaScript字符串是否是一个有效的URL

迪鲁宾
911 阅读8分钟

URL--即统一资源定位器--是用来识别互联网上的网页、图像和视频等资源的文字。

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

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

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

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

要学习如何在JavaScript中获得当前的URL，你可以阅读这篇文章：如何在JavaScript中获得当前的URL。

如何使用Regex检查一个字符串是否是有效的URL

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

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

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

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

让我们来学习这两种方法的工作原理。

如何使用正则表达式字头

在正则表达式字面中，模式被包围在斜线之间，正如你在下面看到的。

该模式包括URL 中需要的验证部分。例如，一个协议，https ，一个// ，等等。

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

如何使用正则表达式构造器

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

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

为了演示如何验证一个字符串是否是URL ，让我们创建一个方法，使用正则表达式构造方法验证一个JavaScriptString ，并根据匹配的模式返回True 或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对象。

如果给定的URL TypeError异常，如果给定的URL是无效的，就会抛出。

注意：当你想在你的程序中构建一个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 。
  • 如果字符串不是一个有效的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对象的创建失败，TypeError ，并返回false 。

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

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

在这个例子中，你要验证URL中的一个特定协议。该URL必须包含http 或https 协议：

	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 ），所以它返回错误。

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

如何使用输入元素检查一个字符串是否是一个有效的URL

HTML支持一个输入元素，其类型为 url的输入元素，专门用于表示URL值。

<input> 元素的value 属性包含了字符串，在提交表单之前，它将自动验证与 URL 语法的匹配*（要么是空的，要么是正确形成的 URL*）。

HTMLInputElement.checkValidity()方法用于检查<input> 元素的值属性中的字符串是否是URL 。如果值是一个合适的URL，checkvalidity() 方法返回true ，如果输入的不是一个合适的URL，false 。

让我们创建一个方法，创建一个输入元素类型URL ，并使用checkValidity() 方法验证输入：

    const isValidUrl = urlString =>{
      var inputElement = document.createElement('input');
      inputElement.type = 'url';
      inputElement.value = urlString;

      if (!inputElement.checkValidity()) {
        return false;
      } else {
        return true;
      }
    }

现在让我们使用这个方法并验证不同的字符串，看它们是否是有效的URL：

    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 = "https://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

本节教你如何使用HTMLAnchorElement来检查一个JavaScript字符串是否是一个URL。

**注意：**当你想给你的网页的anchor 标签分配一个URL，并确保URL字符串是有效的并被正确分配到anchor 标签时，使用这个方法是合适的。

HTMLAnchorElement 接口表示超链接元素。它提供了特殊的属性和方法来操纵这种元素的布局和表现。它也被称为锚点标签。

你可以使用href 属性将一个URL分配给一个锚标签。在分配的同时。

  • 如果传递了一个有效的URL字符串，它就会被分配给锚标签
  • 如果传递了一个无效的URL，则会将当前浏览器的位置分配给锚标签。
  • 默认情况下，锚定标签将有一个空的URL（""）。

一旦分配了URL，你可以使用下面解释的属性提取URL的特定部分：

HTMLAnchorElement的属性用途
host一个代表主机名和端口的字符串
hostname一个代表主机名的字符串
href一个包含有效URL的字符串
origin返回一个包含来源、模式、域名和端口的字符串。
port一个代表端口的字符串（如果指定的话
protocol代表协议的字符串，包括尾部的(':')
pathname一个包含从初始（/）开始的URL路径的字符串，不包括查询字符串

现在，让我们看看如何检查指定的字符串是否是一个适当的URL。

如果它是一个适当的URL，它将被分配到锚标签。否则，当前浏览器的位置将被分配给锚标签。

因此，为了检查它是否是一个合适的URL，你可以使用语句a.host != window.location.host ，检查锚标签的host 是否不等于当前位置。

让我们看一下代码。

我们创建一个lambda函数，并将其分配给下面代码中的常量isValidUrl 。

该函数创建了一个锚定标签元素，并将URL字符串分配给锚定标签。之后，它检查该元素的host 属性是否为null 或未定义。

如果它不是空的，它检查host 属性是否不等于当前浏览器的URL，当它不等于时，返回True 。

这是因为如果传递的URL是有效的，那么锚定标签将有URL值。但如果传递的URL是无效的，那么锚点标签就会有当前浏览器的位置。在这种情况下，lambda函数返回False ：

const isValidUrl = urlString =>{	
  	var a  = document.createElement('a');
   	a.href = urlString;
   	return (a.host && a.host != window.location.host);
  }

下面的代码片断用不同的输入调用lambda函数isValidUrl() ，并在控制台中打印相应的输出：

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

这个教程可以在这个JSFiddle中找到。

总结

在这篇文章中，你已经学会了如何使用不同的方法来检查一个JavaScript字符串是否是URL ，以及何时使用每种方法是合适的。

如果你喜欢这篇文章，请随时分享它。

avatar
文章
阅读
粉丝