如何将输入的字符串识别为 URL - JavaScript

Question

我有一个输入字段，可以在其中输入任何文本，包括其中的 URL。如果输入的是长 URL，我想缩短它（我将通过 API 处理这个问题）。HTML：<input type="text" onKeyDown={this.onKeyDown(event)}/>JavaScript：function onKeyDown(event) { var stringWithURL = "Hello, World! https://www.google.com. I'm delighted to be a part of "https://amazon.com". Come again";  if (event.keyCode === 32 || event.keyCode === 13) { // Space bar and enter keys      let url;      try {        url = new URL(stringWithURL); // This text includes simple text as well as URL as a string        if(url.protocol === "http:" || url.protocol === "https:") {          return this.convertLongURLtoShort(stringWithURL); // Call API function        }      } catch (e) {        return false;      }    }}但是，上述函数无法识别简单文本与 URL，因为输入文本将整个内容视为单个字符串。因此它总是进入失败函数，我永远无法将 URL 转换为短 URL。当我们在输入字段中输入内容时（可能是在按空格键或 Enter 键后），是否有办法识别文本与 URL，并在用户输入的单词是 URL 时调用 API？

Answer 1

因为：

如果给定的基本 URL 或结果 URL 不是有效的 URL，则会引发 JavaScript TypeError 异常。 

function isURL(me){

  try { 

    new URL(me);

    console.log(me + " is a valid URL!");

    return true

  } 

  catch (e){

    console.log(e.message);

    return false

  }

}

console.log(isURL("/home/dev/infos"))

console.log(isURL("https://website.com"))

console.log(isURL(88))

console.log(isURL("Hello_World!"))

<input onKeyDown="isURL(this.value)">

Answer 2

在这种情况下，我建议使用正则表达式根据输入字符串拆分 URL。

该模式可以在这里找到：

https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)

另外，在您的示例字符串中，由于某些 URL 以点 (.) 字符结尾，因此您需要删除最后一个字符。

function onKeyDown(event) {

  var stringWithURL = "Hello, World! https://www.google.com. I'm delighted to be a part of \"https://amazon.com\". Come again";

  if (event.keyCode === 32 || event.keyCode === 13) { // Space bar and enter keys

      let pattern = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g

      let urls = stringWithURL.match(pattern);

      for (let url of urls) {

        if (url.endsWith('.')) {

          // Removing the last character if the URL ends with a dot

          url = url.slice(0, url.length - 1);

        }

        // Parsing to URL

        url = new URL(url);

        if(url.protocol === "http:" || url.protocol === "https:") {

          console.log(url);

        }

      }

    }

}

<input type="text" onKeyDown="onKeyDown(event)"/>