Finishing up with regular expressions

Question

Finishing up with regular expressions

I want to create an autocomplete feature for the input field on my website. For instance, when the tab key is pressed, I want the word htt to automatically become tp:// in the input value.

This autocomplete should only work if the user inputs "htt" at the start of the URL.

My initial idea was to use a regular expression to validate the autocompletion:

if(event.keyCode == 9){
      if(myInput.value.match(/^(h|ht|htt|http|http:|http:\/)/)){
          myInput.value = "http://";
      }
 }

However, the actual outcome was not as expected...

javascript regex

Answer 1

Answer №1

Three alterations to make:

Ensure you assign to myInput.value by using = instead of == for comparison.
For a more precise regular expression, include an end of string anchor $ to prevent unintended replacement of text after the initial "h".
Consider canceling the default TAB key behavior to allow autocomplete within the input box without altering the default functionality.

Check out the corrected code snippet below:

myInput.addEventListener('keydown', function (event) {
    if (event.keyCode == 9){
        if(this.value.match(/^(h|ht|htt|http|http:|http:\/)$/)){
            this.value = "http://";
        }
        event.preventDefault();
    }
});

<input id="myInput">

Answer 2

Three alterations to make:

Ensure you assign to myInput.value by using = instead of == for comparison.
For a more precise regular expression, include an end of string anchor $ to prevent unintended replacement of text after the initial "h".
Consider canceling the default TAB key behavior to allow autocomplete within the input box without altering the default functionality.

Check out the corrected code snippet below:

myInput.addEventListener('keydown', function (event) {
    if (event.keyCode == 9){
        if(this.value.match(/^(h|ht|htt|http|http:|http:\/)$/)){
            this.value = "http://";
        }
        event.preventDefault();
    }
});

<input id="myInput">

Finishing up with regular expressions

Answer №1

Similar questions

Observable - transforming two promises into an observable stream

Discover the magic of Bootstrap 3.0 Popovers and Tooltips

Including item from ajax not within $.when function finished

When I remove a user as admin, I am unable to retrieve all users to update the data table

The EJS templating system

What steps do I need to take to create a delete button that will effectively remove a bookmark from an array?

What is the best way to connect a line from the edge of the circle's outermost arc?

Issues arising with Intersection Observer in vue.js

Toggle the checkbox to either select or deselect the value

issues with updating a MongoDB collection

Steps for toggling between enabling and disabling the 2 instances of bvalidator

NodeJS sqs-consumer continuously triggers the function to execute

Unable to transfer information from the Parent component to the Child component

Using Rails 6 to trigger a JavaScript function after rendering a partial

Creating customized JavaScript using jQuery for Drupal 7 Form API

magnificPopup experiencing difficulties when attempting to invoke a class that is dynamically generated within the HTML document

What is the process for setting a personalized title for error pages in Remix?

Animating background color change with scroll in React using fade effect

AngularJS failing to load controller for my specific scenario

Guide on fetching data from a database using Node Js in a hierarchical structure