正则表达式没有删除无效字符

Question

我尝试使用正则表达式在keyup事件上验证十六进制颜色的文本字段，如下所示：

if (/[^0-9A-Fa-f]$/i.test(this.value)) this.value = this.value.replace(/[^0-9A-Fa-f]$/g, '');

当我输入字符时它起作用，但当我粘贴其中包含无效字符的内容时（例如＆＃39; return＆＃39;，＆＃39; hexTextField＆＃39;），它不会删除无效的字符。

为什么会发生这种情况，我该如何解决？

JSFiddle

＆＃13;

＆＃13;

document.getElementById('hexTextField').addEventListener('keyup', function(e) {
  if (/[-\/\\^$*+?.()|[\]{}]/g.test(this.value)) this.value = this.value.replace(/[-\/\\^$*+?.()|[\]{}]/g, '');
  // If not 'if statement', when press special chars (ex arrows), won't work.
  if (/[^0-9A-Fa-f]$/i.test(this.value)) this.value = this.value.replace(/[^0-9A-Fa-f]$/g, '');
});

＆＃13;

<input type="text" id="hexTextField" spellcheck="false" maxlength="6">

＆＃13;

＆＃13;

＆＃13;

Answer 1

好吧那是因为你的正则数据集的范围是字符串的“$”结尾，这意味着如果你粘贴“return” - ＆gt;它只会检查其中的最后一个字符。

所以只需从if（）

中删除上次作业中的“$”即可

Answer 2

您可以进一步将其简化为：

＆＃13;

＆＃13;

document.getElementById('hexTextField').addEventListener('keyup', function(e) {
  this.value = this.value.replace(/\W/g, '');
});

＆＃13;

<input type="text" id="hexTextField" spellcheck="false" maxlength="6">

＆＃13;

＆＃13;

＆＃13;