How can I replace simple text with a validated URL?

Question

I have to inputs, one is for when you enter the a site name and the other one is only a readable input where the site name turns into the url. Like in the screenshot below:

So I have this:

  const handleChange = (e) => {    
    setSiteInfoDataAction({
      ...siteInfoData,
      siteName: e.target.value, // for the Site Name input
      url: e.target.value.toLowerCase().replace(/\s/g, "-"), // for the URL input
    });

    e.preventDefault();
  };

So the only validation i am doing is that every time there is a space, a hyphen is replacing the space. But I need to validate that the user is entering a valid name to recreate the URL. Get it? I need to regex to allow the user to enter only URL friendly characters.

Any ideas on how I can achieve that?

EDIT You should notice that the regex should validate only the part after the slash /. Just like in the input in the screenshot. So the regex won't validate any http/s or www. Just whatever is after the / should be URL friendly.

Answer 1

There are two ways to achieve your goal:
1. slugify the input
2. use built-in encodeURI() method

Both result in valid URL. However, the question specification (like replace ' ' with -) has closer match to slug conversion.

Slugify URL

Other than whitespaces, additional characters need to be handled, e.g:

• special characters
• non-word characters
• other formatting

In JS, a function to slugify string can be created like this (Source):

function slugify(string) {
  const a = 'àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìłḿñńǹňôöòóœøōõőṕŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·/_,:;'
  const b = 'aaaaaaaaaacccddeeeeeeeegghiiiiiilmnnnnoooooooooprrsssssttuuuuuuuuuwxyyzzz------'
  const p = new RegExp(a.split('').join('|'), 'g')

  return string.toString().toLowerCase()
    .replace(/\s+/g, '-') // Replace spaces with -
    .replace(p, c => b.charAt(a.indexOf(c))) // Replace special characters
    .replace(/&/g, '-and-') // Replace & with 'and'
    .replace(/[^\w\-]+/g, '') // Remove all non-word characters
    .replace(/\-\-+/g, '-') // Replace multiple - with single -
    .replace(/^-+/, '') // Trim - from start of text
    .replace(/-+$/, '') // Trim - from end of text
}

Then, in the code, call the slugify function

... //other codes
  url: slugify(e.target.value)
... //other codes

URL Encoding

This approach simply converts input characters to URL-encoded characters. encodeURI(string) is built-in JS function to handle it. Just call it in the function:

... //other codes
  url: encodeURI(e.target.value)
... //other codes

The drawback is the URL probably will not look pretty, although still valid.

---

The best choice depends on the use case. If URL for blog or article is desired, first approach would be the best. If it is used solely for converting plain text to valid URL, second approach would be faster.