How to identify a typed string as a URL - JavaScript

Question

I have an input field where I'm entering any text including URLs inside it. If a long URL is entered is that text I want to shorten it (I'll be taking care of that via 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;
      }
    }
}

However, the above function does not recognize simple text vs. a URL, as the input text takes the entire content as a single string. Hence it always goes into the failure function and I never get to convert URL into a short URL.

Is there a way to identify a text vs. a URL as we type into the input field (may be after hitting the space bar key or enter key) and call the API if the word entered by THE user is A URL?

score 1 · Answer 1 · edited Feb 01 '21 at 11:54

You will find old regex madness information at Check if a JavaScript string is a URL, but our browsers now have the URL() capabilities, so we can very simply test against it, because:

If the given base URL or the resulting URL are not valid URLs, the JavaScript TypeError exception is thrown. https://developer.mozilla.org/en-US/docs/Web/API/URL/URL

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)">

score 0 · Accepted Answer · edited Feb 01 '21 at 11:53

In this case, I suggest to use a regex to split URL(s) based on the input string.

The pattern can be found here:

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

Also, in your example string, because there is some URL which ends with a dot (.) character, you need to remove that last character.

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)"/>

How to identify a typed string as a URL - JavaScript

2 Answers2