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

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

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

HTML 支持 type 的 input 元素url，专门用于表示 URL 值。

在提交表单之前，通过匹配 URL 语法（具有空的或格式正确的 URL ）来自动验证包含字符串的<input>元素value属性。**

HTMLInputElement.checkValidity()方法用于检查 <input>元素的 value 属性中的字符串是否为URL. 如果值是正确的 URL 并且输入不是正确的 URL，则该checkvalidity()方法返回。true``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，你可以host使用语句检查锚标记是否不等于当前位置a.host != window.location.host。

让我们看一下代码。

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

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

如果不为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);
  }

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

  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使用不同的方法，以及何时适合使用每种方法。