用JavaScript/jQuery正则表达式替换输入框中的无效字符。

Question

我正在构建一个CMS，用户可以通过文本输入控件自定义页面的SEO URL。例如，假设用户正在创建一个画廊，并希望他们的页面在http://www.example.com/my-1st-gallery上访问。

请注意，“my-1st-gallery”部分不包含任何URL的非法字符。由于大多数用户不知道什么是允许和不允许的，因此我想创建一个JavaScript正则表达式过滤器，可以在按键抬起时过滤/转换所有非法字符。

我知道如何使用jQuery/JavaScript来监听按键抬起事件，但我不确定如何使用正则表达式执行以下操作：

1. 过滤除a-z、A-Z、0-9、a“-”、“_”和空格之外的所有字符。
2. 将任何“_”和空格更改为“-”，并让用户知道给定字符已被转换为“-”。

有人能提供一个好的例子来完成正则表达式部分吗？再次说明，我知道如何监听按键抬起事件。

---

好的，有了所有这些好答案，我认为我可以将它们组合起来用于我的Web应用程序。我希望我可以选择多个答案作为我的最终答案！:S 谢谢大家！

- Oliver Spryn

Answer 1

$("#inputElement").keyup(function() {
    var input = $(this),
    var text = input.val().replace(/[^a-zA-Z0-9-_\s]/g, "");
    if(/_|\s/.test(text)) {
        text = text.replace(/_|\s/g, "");
        // logic to notify user of replacement
    }
    input.val(text);
});

- jdc0589

---

是的，除了a-z、A-Z、0-9、"-"、""和空格之外的所有其他字符都将被忽略。另外，""和空格将被转换为"-"，并让用户知道此操作已经发生。 - Oliver Spryn

也许是因为我刚才忘记放“input.val(text);”了？谁知道呢。 - jdc0589

Answer 2

正则表达式可以用来删除除了指定字符之外的所有字符，然后将"_"和空格替换为"-"：

var inputVal = $('input.myField').val();
var newVal = inputVal.replace(/[^A-Za-z0-9\-_\s]/g, '').replace(/[_\s]/g, '-');
if (newVal != inputVal) {
  alert('We modified something!');
  // Do some more things...
}
$('input.myField').val(newVal);

- jerluc

---

哦！不错！我唯一想要添加的是当后面的正则表达式被触发时，添加一个事件监听器。这可行吗？ - Oliver Spryn

如果这是指需要告诉用户他们的输入是否已被修改的要求，就不要费心处理那种复杂性。我会在我的帖子中添加一些额外的代码。 - jerluc

Answer 3

您可以像这样做（假设您已将字符存储在key变量中）

if(key.test(/[_\s]/)){
   key = "-";
   alert("key changed to -");  
}
if(!key.test(/[a-zA-Z0-9\-]/g){
  key = "";
  alert("Invalid key");
}

希望这能有所帮助。干杯！

- Edgar Villegas Alvarado

Answer 4

这将过滤以下字符（1）：

/[^a-zA-Z0-9\-_ ]/g

/ 在 JavaScript 中是正则表达式的分隔符。 [] 用于限定字符类，而字符类中的 ^ 表示“匹配所有不在此类中的字符”。然后您可以在类中指定单个字符（如“-”和“_”），或指定一个范围（如“a-z”）。

分隔符外的 g 用作“全局搜索”的标志，这意味着正则表达式会多次匹配，否则它将在第一次匹配时停止搜索。 \ 用作转义字符，我用它来转义字符类中的连字符，因为在字符类内部，它被用作元字符来指定字符范围。

实际上，我不确定是否有必要这样做，因为我在 Java、PHP 和 Mozilla JavaScript 正则表达式文档中没有找到任何关于需要转义连字符的内容，而且我在 Firefox 5 和 Chrome 12 中的测试显示两种方式都可以工作。

您可以在 Mozilla 文档中了解更多关于 JavaScript 正则表达式 的内容，并在 http://regexpal.com/ 上测试您的正则表达式。

- user456814

---

需要在字符类中转义那个破折号。 - ridgerunner

@ridgerunner 我尝试了两种方式，分别是"http://www.theirsite.com/my-1st-gallery".match(/[0-9-]/g)和"http://www.theirsite.com/my-1st-gallery".match(/[0-9\-]/g)。两种方式都可以工作。我查阅了PHP、Java和Mozilla JavaScript的正则表达式文档，但没有一个说你必须在字符类中转义连字符。你知道有其他相关参考资料吗？ - user456814

@Keoki Zee：在字符类中，破折号（连字符）是用于指定范围的元字符。如果您想匹配字面上的破折号，则应对其进行转义。但是，大多数正则表达式方言会原谅您，如果未转义的破折号的位置使其不可能表示范围（即位于类的开头或结尾）。在您的情况下，您很幸运。请参见：www.regular-expressions.info上的“字符类内的元字符”。 - ridgerunner

Answer 5

我正在使用这个jQuery插件：http://www.thimbleopensource.com/tutorials-snippets/jquery-plugin-filter-text-input。

- Antonio Petricca