如何将输入的字符串识别为 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)"/>