Url validation based on input-CodePudding

I try to forcefully add https to all links regardless of whether the link is domain.com http://example.com, https://example.com with or without www.

Also, the text of the links should be of the form example.com or www.example.com (eliminating https:// or http://)

    $('#website-url').keyup(function() {
      $('.website_url').html(this.value);
      $('.website_url').prop('href', this.value);
   });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="website-url" >Website URL ✱</label>
<br>
<input  type="url" id="website-url" placeholder="websiteurl.com" aria-label="Website URL" requiered>
<br>
Welcome to our website: <a href="#" >[WEBSITE URL]</a>.
<br>
Please do not continue to use <a href="#" >[WEBSITE URL]</a> if you do not agree with all of the terms and conditions stated on this page.

CodePudding user response：

You can make up some variables to work with. In this example I'm saving the original thing from the input field in the variable original_url.

Then I can make to variations: stripped_url is the original url without https:// or http://

full_url is the stripped url with https:// added to the front (again).

$('#website-url').keyup(function() {
  let original_url = this.value;
  let stripped_url = original_url.replace(/https?:\/\//, '');
  let full_url = "https://"   stripped_url;
  $('.website_url').html(stripped_url);
  $('.website_url').prop('href', full_url);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="website-url" >Website URL ✱</label>
<br>
<input  type="url" id="website-url" placeholder="websiteurl.com" aria-label="Website URL" requiered>
<br>
Welcome to our website: <a href="#" >[WEBSITE URL]</a>.
<br>
Please do not continue to use <a href="#" >[WEBSITE URL]</a> if you do not agree with all of the terms and conditions stated on this page.