JavaScript/jQuery 正则表达式用有效字符替换输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6565480/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript/jQuery Regex Replace Input Field with Valid Characters
提问by Oliver Spryn
I am building a CMS where a user can customize the SEO URL of a page via a text input control. For example, say the user is creating a gallery, and they want their page to be accessed at http://www.theirsite.com/my-1st-gallery.
我正在构建一个 CMS，用户可以在其中通过文本输入控件自定义页面的 SEO URL。例如，假设用户正在创建一个画廊，并且他们希望通过http://www.theirsite.com/my-1st-gallery访问他们的页面。
Notice how the "my-1st-gallery" portion doesn't contain any illegal characters for a URL. Since most users won't know what is allowed and not allowed, I'd like to create a JavaScript regex filter which can filter/convert all illegal characters on key-up.
请注意“my-1st-gallery”部分如何不包含任何非法 URL 字符。由于大多数用户不知道什么是允许和不允许的，我想创建一个 JavaScript 正则表达式过滤器，它可以过滤/转换键盘上的所有非法字符。
I know how to use jQuery/JavaScript to listen for key-up events, but I'm not sure how to use a regex to do the following:
我知道如何使用 jQuery/JavaScript 来监听按键事件，但我不确定如何使用正则表达式来执行以下操作：
- Filter all characters other than a-z, A-Z, 0-9, a "-", a "_", and a space.
- Change any "_" and spaces to a "-", and let the user know that the given character has been converted into "-".
- 过滤除 az、AZ、0-9、“-”、“_”和空格以外的所有字符。
- 将任何“_”和空格更改为“-”，并让用户知道给定的字符已转换为“-”。
Could someone provide a good example of how to do the regex part. Again, I understand how to listen for key-up events.
有人可以提供一个很好的例子来说明如何做正则表达式部分。再次，我了解如何监听按键事件。
Thank you for your time!
感谢您的时间！
Ok, with all of these good answers, I think I can piece this together for my web app. I wish I could select more than one answer as my final! :S Thank you all!
好的，有了所有这些好的答案，我想我可以为我的网络应用程序拼凑起来。我希望我可以选择多个答案作为我的最终答案！:S 谢谢大家！
回答by jdc0589
$("#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);
});
回答by jerluc
Regular expression to remove all characters other than what you have specified is allowed and then replace "_" and " " with "-":
允许使用正则表达式删除除您指定的字符以外的所有字符，然后将“_”和“”替换为“-”：
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);
回答by Edgar Villegas Alvarado
You could do something like this (asuming you have the character stored in the keyvariable)
你可以做这样的事情（假设你有存储在key变量中的字符）
if(key.test(/[_\s]/)){
key = "-";
alert("key changed to -");
}
if(!key.test(/[a-zA-Z0-9\-]/g){
key = "";
alert("Invalid key");
}
Hope this helps. Cheers
希望这可以帮助。干杯
回答by Edgar Villegas Alvarado
This will filter the characters for (1):
这将过滤 (1) 的字符：
/[^a-zA-Z0-9\-_ ]/g
The /are regex delimiters in JavaScript. The []delimit a character class, and the ^insideof the character class means "match all characters notcontained inside this class". Then you can specify individual characters inside the class (like "-" and "_"), or specify a range (like "a-z").
该/是JavaScript的正则表达式的分隔符。在[]划定一个字符类，而^里面的字符类手段的“匹配所有的字符不包含这个类里面”。然后您可以在类中指定单个字符（如“-”和“_”），或指定一个范围（如“az”）。
The goutside the delimiters is used as a flag for "global search", which just means that the regex matches more than once, otherwise it will stop at the first match and then stop searching. The \is used as an escape character, which I use to escape the hyphen in the character class, because it's used as a meta character inside character classes to specify character ranges.
g分隔符的外侧用作“全局搜索”的标志，这仅表示正则表达式匹配不止一次，否则它将在第一次匹配时停止，然后停止搜索。将\被用作转义字符，我用它来逃脱字符类的连字符，因为它用作字符类中的meta字符指定字符范围。
I'm not actually sure if that's necessary, because I haven't found anything in the Java, PHP, and Mozilla JavaScript regex docs that say hyphens need to be escaped like that, and my tests in Firefox 5 and Chrome 12 show that it works either way.
我实际上不确定这是否有必要，因为我在 Java、PHP 和 Mozilla JavaScript 正则表达式文档中没有发现任何内容说连字符需要像这样转义，我在 Firefox 5 和 Chrome 12 中的测试表明它无论哪种方式都有效。
You can read more about JavaScript regex at the Mozilla docs, and test your regexes at http://regexpal.com/.
您可以在 Mozilla 文档中阅读有关JavaScript 正则表达式的更多信息，并在http://regexpal.com/ 上测试您的正则表达式。
回答by Antonio Petricca
I'm using this plugin jQuery : http://www.thimbleopensource.com/tutorials-snippets/jquery-plugin-filter-text-input.
我正在使用这个插件 jQuery：http: //www.thimbleopensource.com/tutorials-snippets/jquery-plugin-filter-text-input。
