RegEx 不适用于替换 JavaScript 方法

Question

我需要一些关于正则表达式的帮助，问题是我需要在 JavaScript 中使用 Replace 方法应用正则表达式。我在 Stackoverflow 看到了一些帖子，但是任何正则表达式都不起作用，我不知道为什么。

我需要用户只能输入以下数据：

100
100.2
100.23

注意：只有数字，最多可以有一位或两位小数。不允许使用其他符号，当然也不允许使用逗号。

我一直在阅读它，我使用了一些正则表达式生成器来查看匹配，所以我做了这个：

/^[a-zA-Z]+(\.[a-zA-Z]{0,2})?$/

一开始我有点迷糊，因为我在replace方法中使用了：

elementOne.addEventListener("input", function(event) {
   this.value = this.value.replace(/^[a-zA-Z]+(\.[a-zA-Z]{0,2})?$/, '');
});

现在我读到的过程如下：如果我输入一个从 a 到 z 的字母，该方法将替换为空格 ''。但其余的在方法中不起作用，但在生成器中起作用。

这是一个示例，您将在第一个输入中看到我的正则表达式与 Sven.hig 正则表达式：

const elementOne = document.getElementById('elementOne');
const elementTwo = document.getElementById('elementTwo');

elementOne.addEventListener("input", function(event) {
   this.value = this.value.replace(/^[a-zA-Z]+(\.[a-zA-Z]{0,2})?$/, '');
});

elementTwo.addEventListener("input", function(event) {
   this.value = this.value.replace(/^\d+[,]?\d{0,2}/, '');
});

<p>Element One (My RegEx)</p>
<input id="elementOne" type="text" />
<p>Element Two (Stack RegEx)</p>
<input id="elementTwo" type="text" />

也可以作为CodePen

Answer 1

您的正则表达式是匹配单词而不是数字，您应该将 [a-zA-Z]by [0-9] 和 \. 替换为 \,

所以你的正则表达式应该看起来像这样/^[0-9]+(\,[0-9]{0,2})?/

或者你可以缩短模式/^\d+[,]?\d{0,2}/gm

这里是代码 sn-p 以防止用户输入与模式不匹配的单词或任何数字

const elementTwo = document.getElementById('elementTwo');
var flag=false
elementTwo.addEventListener("input", function(event) {
  pattern=/^\d+[,]?\d{0,2}$/
   if (pattern.test(this.value)){
         flag=true
         l=this.value
         if(flag&&this.value.length>1)
          return this.value
          else flag=false 
        
   }
  else if(!pattern.test(this.value)&&flag==true){
         return this.value=l
  
     }
       
     else if(!pattern.test(this.value)&&flag==false){
         return this.value=""
  
     }
       
});

<p>Element Two (Stack RegEx)</p>
<input id="elementTwo" type="text" />

Answer 2

您似乎混淆了一些事情：

• 替换字符串中的无效字符
• 定义验证模式
• 防止输入文本

如果您的目标是验证您的字符串格式是否正确，您可以定义如下正则表达式：

const validFormat = /^\d+(,\d{0,2})?$/;
console.log(validFormat.test('99'));        // true
console.log(validFormat.test('100,23'));    // true
console.log(validFormat.test('X00,2E'));    // false
console.log(validFormat.test('%#&SJ&#UJ')); // false

如果您的目标是删除无效字符（非数字、非逗号），您可以为这些无效字符定义正则表达式，但这与确保您的字符串现在具有有效格式不同。 RegExp 不能做这样的事情：

const invalidChars = /[^\d,]/g;
const sanitized = someString.replace(invalidChars, '');

如果您想防止输入字符，最好将keydown 事件处理程序添加到您的输入中，并防止无效键的默认行为。

const myInput = document.querySelector('#some-input');
myInput.addEventListener('keydown', ({ key, preventDefault }) => {
  if (key !== ',' && (key < '0' || key > '9')) {
    preventDefault();
  }
});