2011-07-03 10 views
4

私はユーザーがテキスト入力コントロールを使用してページのSEO URLをカスタマイズできるCMSを構築しています。たとえば、ユーザーがギャラリーを作成しており、そのページにhttp://www.theirsite.com/my-1st-galleryでアクセスしたいとします。JavaScript/jQuery Regex有効な文字で入力フィールドを置き換えます

"my-1st-gallery"部分にURLに不正な文字が含まれていないことに注意してください。ほとんどのユーザーは何が許可されているのかわからないので、キー入力時にすべての不正な文字をフィルタリング/変換できるJavaScript正規表現フィルタを作成したいと思います。

は私がキーアップイベントをリッスンするためにjQueryの/ JavaScriptを使用する方法を知っているが、私は次の操作を行うために正規表現を使用するかどうかはわかりません。

  1. フィルターAZ、AZ以外のすべての文字を、0-9、 " - "、 "_"、およびスペースが含まれます。
  2. "_"とスペースを " - "に変更し、指定された文字が " - "に変換されたことをユーザーに知らせます。

誰かが正規表現の部分を行う方法の良い例を挙げることができますか。ここでも、キーアップイベントを聞く方法を理解しています。

ありがとうございました!


これらすべての良い回答で、私はこれを私のWebアプリケーション用にまとめることができると思います。私は私の最終として複数の答えを選ぶことができたらいいなあ! :Sありがとうございました!

答えて

7
$("#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); 
}); 
+0

はい、a-z、A-Z、0-9、 " - "、 "_"、およびスペース以外のすべての文字は無視されます。さらに、 "_"とスペースは " - "に変換され、このアクションが行われたときにユーザーに知らせることができます。 –

+0

なぜこれが投票されたのですか? –

+0

良い質問ですが、わかりません。 –

1

これは、(1)のために文字をフィルタリングします:

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

/はJavaScriptで正規表現の区切り記号です。 []は、文字クラスを区切ると、文字クラスの内部^は「このクラスの内部に含ますべての文字のない一致する」という意味します。次に、クラス内の個々の文字( " - "や "_"など)を指定したり、範囲を指定することができます( "a-z"など)。

区切り文字以外の部分は、グローバル検索のフラグとして使用されます。これは、正規表現が複数回一致することを意味します。そうでない場合は、最初の一致で停止して検索を停止します。 \は、エスケープ文字として使用されます。エスケープ文字は、文字クラス内でハイフンをエスケープするために使用されます。文字クラス内のメタ文字として使用され、文字範囲を指定します。

Java、PHP、Mozilla JavaScriptのregexドキュメントで、ハイフンをそのようにエスケープする必要があり、Firefox 5とChromeのテストで何も見つからないため、実際には必要ないかどうかはわかりません12はいずれの方法でも動作することを示しています。

JavaScript regex at the Mozilla docsについて詳しくは、http://regexpal.com/で正規表現をテストしてください。

+0

うわー、詳細な答えのおかげでKeoki! –

+0

文字クラスでそのダッシュをエスケープする必要があります。 – ridgerunner

+0

@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用の正規表現ドキュメントを確認しましたが、文字クラスでハイフンをエスケープする必要があるとは言いませんでした。そうでないことが分かっている参考資料はありますか? –

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); 
+0

Ohh!ニース!私がそれに追加する唯一の事は、後者の正規表現が起動されたときのイベントリスナーです。それは可能ですか? –

+0

これは、入力が変更されたかどうかをユーザーに伝えることができるという要件を指している場合、そのような複雑さを気にしないでください。私は私のポストにいくつかの余分なコードを追加します。 – jerluc

2

あなたはこのような何かを行うことができます(あなたが持っているasuming文字はkey変数に格納されています)

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

希望します。乾杯する

関連する問題