需要一个正则表达式来强制$或％而不是两者都强制

问题描述

当前，我在Angular 9应用内的HTML页面上定义了以下输入：

<input type="text" formControlName="amountToWithholdInput"
       onkeyup="this.value = this.value.replace(/[^0-9.%$]/,'');">

随着人的键入，它会自动删除不是数字，$，％或小数的任何字符。

如何修改此设置，以便如果他们已经输入了$则删除了％，反之亦然（如果他们已经输入了％则删除了$）？换句话说，它需要检查并查看是否存在特定字符，如果他们尝试键入该字符，则将其删除。

还是我要解决所有这些错误？还有其他我没想到的方法吗？

解决方法

本质上，您是在要求用户插入带有可选小数部分和尾随$或%符号的数字值，其他所有内容都应放在键输入上。

因此，我们可以使用匹配任意字符串但将小数和单个符号保留在可选组中的正则表达式，然后仅将原始字符串替换为该组$1，而将完全匹配的其余部分掉了。试试吧：

<input type="text" formControlName="amountToWithholdInput" 
    onkeyup="this.value = this.value.replace(/^((?:[0-9]+\.?[0-9]*)[%$]?)?.*/,'$1')">

要执行此操作，我们需要确保内部正则表达式也可以匹配最终字符串的不完整版本，即数字，点和符号部分也必须设为可选。如果您需要一个更具体的数字（例如，仅两个小数）或不同的顺序（例如，美元符号在前，最后一个百分比），我们可以轻松调整内部正则表达式，但可以应用相同的概念，即

<input type="text" formControlName="amountToWithholdInput" 
    onkeyup="this.value = this.value.replace(/((?:[0-9]*\.?[0-9]{0,2}[%]?)|(?:[$]?[0-9]*\.?[0-9]{0,2}))?.*/,'$1')">

在这里，子图案的顺序变得很重要，因为我们只想在一个特定位置匹配一个符号。