如何用Angular或JavaScript去除输入框中的http:///https://前缀？

Hey there! Let's solve this problem of automatically stripping http:// or https:// prefixes from your domain input. Since you asked for Angular first, I'll lead with that solution, then share a vanilla JS option in case you need it.

Angular Solution (Recommended) #

Angular provides clean, maintainable ways to handle form value transformations—here are two solid approaches:

1. Reactive Forms (Best for Controlled Forms) #

Reactive Forms give you full control over form state and value updates. Here's how to implement the prefix stripping:

First, set up your component with a FormControl and listen for value changes:

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-domain-input',
  template: `
    <input 
      type="text" 
      id="website" 
      name="website" 
      class="form-control" 
      style="margin:0"
      [formControl]="websiteControl"
    >
  `
})
export class DomainInputComponent implements OnInit {
  websiteControl = new FormControl('');

  ngOnInit(): void {
    this.websiteControl.valueChanges.subscribe(value => {
      if (value) {
        // Strip http:// or https:// (case-insensitive) from the start of the string
        const strippedValue = value.replace(/^https?:\/\//i, '');
        // Only update if the value changed to avoid infinite loops
        if (strippedValue !== value) {
          this.websiteControl.setValue(strippedValue, { emitEvent: false });
        }
      }
    });
  }
}

2. Custom Directive (Great for Reusability) #

If you need this functionality across multiple inputs, a custom directive is perfect—it keeps your code DRY:

import { Directive, HostListener } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[appStripHttpPrefix]'
})
export class StripHttpPrefixDirective {
  constructor(private ngControl: NgControl) {}

  @HostListener('input', ['$event.target.value'])
  onInput(value: string): void {
    if (value) {
      const strippedValue = value.replace(/^https?:\/\//i, '');
      if (strippedValue !== value) {
        this.ngControl.control?.setValue(strippedValue, { emitEvent: false });
      }
    }
  }
}

Use it in your template with either template-driven or reactive forms:

<input 
  type="text" 
  id="website" 
  name="website" 
  class="form-control" 
  style="margin:0"
  appStripHttpPrefix
  [(ngModel)]="website"
>

Vanilla JavaScript Solution #

If Angular isn't the right fit for your project, here's a lightweight vanilla JS implementation with improved user experience:

<input 
  type="text" 
  id="website" 
  name="website" 
  class="form-control" 
  style="margin:0"
>

<script>
const websiteInput = document.getElementById('website');

websiteInput.addEventListener('input', function() {
  const currentValue = this.value;
  if (currentValue) {
    // Strip case-insensitive http:// or https:// prefix
    const strippedValue = currentValue.replace(/^https?:\/\//i, '');
    if (strippedValue !== currentValue) {
      this.value = strippedValue;
      // Keep cursor at the end of the input after updating
      this.setSelectionRange(strippedValue.length, strippedValue.length);
    }
  }
});
</script>

A Quick Note on the Regex #

The regex ^https?:\/\//i works like this:

• ^ matches the start of the string (so we only strip prefixes, not random instances in the middle)
• https? matches http or https (the ? makes the s optional)
• :\/\/ matches the literal ://
• i makes the match case-insensitive (so HTTP://, Https://, etc., are all stripped)

内容的提问来源于stack exchange，提问作者Aiden Doyle