如何提取input值中的纯数字并将type="text"转换为type="number"？

Got it, let's work through this problem step by step. You want to target all type="text" inputs that hold a pure numeric value, then switch their type to number. Here's how to implement this with vanilla JavaScript and jQuery, plus breakdowns of edge cases to watch for.

Vanilla JavaScript Solution #

First, we'll grab all text inputs, loop through each one, validate if its value is purely numeric, and update the type if it passes the check.

// Select all text-type input elements
const textInputs = document.querySelectorAll('input[type="text"]');

textInputs.forEach(input => {
  const cleanedValue = input.value.trim(); // Remove leading/trailing whitespace to avoid false matches
  
  // Option 1: Match integers (including those with leading zeros like "00123")
  if (cleanedValue && /^\d+$/.test(cleanedValue)) {
    input.type = 'number';
  }

  // Option 2: Match integers AND decimals (e.g., "123.45", "0.99")
  // if (cleanedValue && /^\d+(\.\d+)?$/.test(cleanedValue)) {
  //   input.type = 'number';
  // }

  // Option 3: Match valid numeric values (ignores leading zeros, since "00123" converts to 123)
  // if (cleanedValue !== '' && !isNaN(Number(cleanedValue)) && String(Number(cleanedValue)) === cleanedValue) {
  //   input.type = 'number';
  // }
});

Validation Option Breakdown: #

• Option 1 (Integer Regex): Ideal if you need to strictly match whole number strings, even those with leading zeros.
• Option 2 (Decimal Regex): Use this if your numeric values might include decimal points.
• Option 3 (Number Conversion Check): Validates that the value can be converted to a valid number and that the converted number matches the original string (filters out partial matches like "123abc").

jQuery Solution (If You're Using jQuery) #

If your project relies on jQuery, here's a concise alternative:

$('input[type="text"]').each(function() {
  const cleanedValue = $(this).val().trim();
  
  // Pick the regex that fits your numeric needs (integer or decimal)
  if (cleanedValue && /^\d+(\.\d+)?$/.test(cleanedValue)) {
    $(this).attr('type', 'number');
  }
});

Edge Cases to Keep in Mind #

• Empty inputs: We skip empty values by checking cleanedValue (empty strings are falsy in JavaScript).
• Whitespace-only inputs: The trim() method ensures inputs with just spaces don't get misclassified as numeric.
• Non-numeric characters: The regex checks guarantee only pure numeric strings are converted.

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