Hey Anderson, sounds like you’re running into two related but distinct headaches with regex and the replace method—let’s work through each one and get things working as expected.

Common Root Causes First #

Before diving into specifics, let’s cover the most frequent mistakes that lead to "can’t delete text" behavior:

• You’re not saving the replace result: Remember, strings in JavaScript are immutable—replace returns a new string, it doesn’t modify the original. If you don’t assign this new value back to your input or variable, nothing will change.
• Missing the global flag (g): Without g, your regex only matches the first occurrence. This can make it look like deletions aren’t working if you have multiple matches to remove.
• Input event interference: If you’re running this logic inside an input event listener, improper handling can overwrite user deletions instantly (e.g., re-adding characters/slashes right after the user deletes them) or mess up cursor position, making deletions feel broken.

Issue 1: Can’t Delete Text After Using Regex #

Let’s say you’re trying to remove certain characters with regex but the text won’t delete. Here’s what’s likely wrong and how to fix it:

Wrong Approach (Common Mistake) #

const input = document.getElementById('myInput');
// This does nothing—replace returns a new string, but we don’t use it
input.value.replace(/[^0-9]/g, '');

Correct Solution #

Assign the result of replace back to the input’s value, and ensure your regex targets exactly what you want to remove:

const input = document.getElementById('myInput');
// Remove all non-numeric characters (example) and update the input
input.value = input.value.replace(/[^0-9]/g, '');

If you’re running this in an input event, add a check to avoid infinite loops and preserve cursor position:

input.addEventListener('input', (e) => {
  const originalValue = e.target.value;
  // Remove unwanted characters
  const cleanedValue = originalValue.replace(/[^0-9]/g, '');
  // Only update if the value changed to avoid re-triggering the event unnecessarily
  if (cleanedValue !== originalValue) {
    const cursorPos = e.target.selectionStart;
    e.target.value = cleanedValue;
    // Adjust cursor position to stay where the user was typing/deleting
    e.target.selectionStart = e.target.selectionEnd = cursorPos;
  }
});

Issue 2: Can’t Delete Text After Adding a Slash with replace #

Adding a slash after the second character (like for date formats MM/DD) often leads to this problem because your logic might re-add the slash immediately after the user deletes it. Here’s how to fix this gracefully:

Wrong Approach (Causes Instant Re-Addition) #

input.addEventListener('input', () => {
  // Forces a slash after 2 characters every time the input changes
  input.value = input.value.replace(/^([0-9]{2})/, '$1/');
});

This breaks deletions because if the user deletes the slash, the input event fires again, and the regex re-adds it. Similarly, deleting a character after the slash will trigger the regex to reformat, making it feel like the deletion didn’t stick.

Correct Solution: Clean First, Format Second #

First strip existing slashes, then reapply the formatting only when needed, and preserve cursor position:

input.addEventListener('input', (e) => {
  const target = e.target;
  // Remove all slashes to start with a clean slate
  let cleanVal = target.value.replace(/\//g, '');
  
  // Add the slash only if we have 3+ characters (or exactly 2, if you prefer)
  if (cleanVal.length >= 2) {
    cleanVal = `${cleanVal.slice(0, 2)}/${cleanVal.slice(2)}`;
  }
  
  // Save cursor position before updating the value
  const cursorPos = target.selectionStart;
  // Calculate how much the cursor needs to shift (if we added a slash)
  const cursorAdjustment = cleanVal.length > target.value.length && cursorPos > 2 ? 1 : 0;
  
  target.value = cleanVal;
  // Restore cursor position with adjustment
  target.selectionStart = target.selectionEnd = cursorPos + cursorAdjustment;
});

This way, when the user deletes characters, the logic starts fresh, reformats only when appropriate, and keeps the cursor where the user expects it—no more "stuck" deletions.

Quick Checks to Rule Out Other Issues #

• Make sure your input’s type is text, not number—number inputs block non-numeric characters like slashes and can behave unpredictably with regex.
• Test your regex in the browser’s console to confirm it’s matching what you think it is. For example, run "1234".replace(/^([0-9]{2})/, '$1/') to see if it returns "12/34" as expected.

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