Mootools 1.2 チュートリアル入力フィルタリング パート 2 (文字列)_Mootools

正規表現の基本的な知識と MooTools でのその使用法については、今後別の講義で説明する予定です。
始める前に、文字列関数がどのように呼び出されるのかを少し見ていきたいと思います。私の場合、次のように文字列変数でこのメソッドを直接呼び出しました。
リファレンス コード:

コードをコピーコードは次のとおりです:

var my_text_variable = "ここにテキストがあります";
// 結果の文字列変数メソッド名
var result_of_function = my_text_variable.someStringFunction() ; >
しかし、より明確に説明できるようにするためにこのように書きました。これらの文字列関数は、次のように、変数を宣言せずに文字列に対して直接呼び出すこともできることを理解してください:

リファレンス コード:

コードをコピーします コードは次のとおりです。

var result_of_function = "ここにテキストがあります" .someStringFunction(); 🎜>

このメソッドは MooTools の数値処理関数にも有効であることに注意してください:
リファレンス コード:

コードをコピー コードは次のとおりです: // 使用法に注意してください。一重引用符で囲まれた文字列ではなく、括弧内の数値です

//

varlimited_number = (256) .limit(1, 100);


また、これをもう一度強調しておきますが、JavaScript で入力をフィルタリングしても、データがサーバーに送信される前に安全にフィルタリングされるわけではありません。 JavaScript で記述した内容はすべて、Web ビューアで表示、操作、無効化することができます。今後 MooTools の Request クラスについて話すときに、PHP フィルタリング テクノロジについて簡単に説明する予定です。それまでは、セキュリティ関連の作業はすべてサーバー側で行い、JavaScript に依存しないでください。
trim()

trim 関数は、処理する文字列の両端から空白文字を削除する単純かつ直接的な方法を提供します。
参照コード:

コードをコピー コードは次のとおりです: // これはトリミングする文字列です。 string

var text_to_trim = " nString With Whitespace ";

// トリミングされた文字列は「String With Whitespace」です。
varrimmed_text = text_to_trim.trim();
n を見たことがなければ、これは単なる改行文字です。これを文字列内で使用すると、文字列を複数の行に分割できます。 Trim メソッドは改行文字を空白文字として扱うため、改行文字も削除されます。 Trim メソッドが実行しない唯一の特別な点は、文字列から余分な空白文字を削除しないことです。次の例は、trim が文字列内の改行を処理する方法を示しています。
リファレンス コード:

コードをコピー

コードは次のとおりです: varrimDemo = function(){ // トリミングする文字列を設定します var text_to_trim = ' ntoo muchwhitespacen ';

// トリミングします

varrimmed_text = text_to_trim .trim();
// 結果を表示
alert('トリミング前 : n'
'|-' text_to_trim '-|nn'
'トリミング後 : n '
'| -'rimmed_text '-|');
}



clean()
よりわかりやすくするために、文字列内のすべての空白文字を削除する必要はないかもしれません。幸いなことに、あなたが苦手としている空白文字に対して、MooTools は clean() メソッドを惜しみなく提供しています。
参照コード:

コードをコピー

コードは次のとおりです: // これトリミングされた文字列 var text_to_clean = " nString nWith Lots n n More nWhitespace n "; // clean 後の文字列は "String With Lots More Whitespace" です

var clean_text = text_to_trim.clean() ;

clean() メソッドは、trim() メソッドとは少し異なります。先頭と末尾の空白文字だけでなく、渡した文字内のすべてのスペースが抽出されます。これらは、文字列内の複数の空白文字と改行とタブを意味します。枝刈りの結果を比較して、その意味を確認してください:
参照コード:

コードをコピー コードは次のとおりです:

var cleanDemo = function(){
// トリミングする文字列を設定します
var text_to_clean = ' toon muchn whitespace ';
// 文字列を消去します
var clean_text = text_to_clean.clean();
// 結果を表示
alert('クリーニング前 : n'
'|-' text_to_clean '-|nn'
'クリーニング後 : n'
'|-' clean_text '-|');
}

contains()
trim() および clean() メソッドと同様に、contains()このメソッドは、その他の追加機能を必要とせずに、非常に単純な処理を実行します。文字列をチェックして、探している文字列が含まれているかどうかを確認し、探している文字列が見つかった場合は true を返し、見つからない場合は false を返します。
参照コード:

コードをコピー コードは次のとおりです:

//これを使用したいのですが、文字列内で検索します。
var string_to_match = "これに含まれるものは機能しますか?";
// 'contain' を検索します。did_string の一致は true
var Did_string_match = string_to_match.contains('contain' );
// Find 'propane'、did_string_match is false
did_string_match = string_to_match.contains('propane');

このメソッドは、次のような場合に便利です。講義 3 で説明した Array.each() 関数などのツールと併用すると、比較的少ないコードで少し複雑なタスクを完了できます。たとえば、一連の単語を配列に入れて 1 つずつ反復処理すると、次のような少ないコードでテキストの同じ領域にある複数の単語を見つけることができます:
参照コード:

コードをコピー コードは次のとおりです:

string_to_match = "一致させたい単語を含む文字列";
word_array = ['words', 'to', 'match'];
// 配列内の各単語を変数として渡します
word_array.each(function(word_to_match){
/ / 現在の単語を検索します
if (string_to_match.contains(word_to_match)){
alert('found ' word_to_match)
}
;テキストボックスに入力し、少し想像力を加えれば、独自の汚い言葉 (またはその他の言葉) 検出器を作成できます。
参照コード:

コードをコピー コードは次のとおりです: var containsDemo = function() {

// 禁止したい単語を配列に入れます

var Band_words = ['drat', 'goshdarn', 'fiddlesticks', 'kumquat'];テキスト フィールド内の単語 Content
var textarea_input = $('textarea_1').get('value');
// フィルター内の各単語を列挙します word
banned_words.each(function(banned_word){
// テキストエリアのコンテンツ内の現在のフィルター単語を検索します
if (textarea_input.contains(banned_word)){
// その単語は使用できないことをユーザーに伝えます
alert(banned_word ' is許可されません');
};
});



substitute() は非常に強力なツールです。今日は、substitute のより強力な機能について、正規表現を使用することで得られる基本的な知識について説明します。これについては後ほど説明します。ただし、これらの基本機能だけでも多くのことができます。
参照コード:

コードをコピー

コードは次のとおりです:

// これは置換メソッドを使用するためのテキスト テンプレートです
// 置換される部分はすべて中かっこで囲まれていることに注意してください
var text_for_substitute = "One is {one}, Two {two}, Three is {three}.";
// このオブジェクトには置換対象のルールが含まれています
// 引用符で囲まれていない部分は検索語です
// 引用符で囲まれていますこの部分は、検索語
var substitution_object = {
one : '最初の変数'、
two : '常に 2 番目に来る'、
three : 'ブロンズに飽きる' を置換するために使用される文です。 . .'
};
// text_for_substitute で置換メソッドを呼び出します
// substitution_object をパラメータとして渡します
// 置換結果を変数 new_string
var new_string = text_for_substitute. replace (substitution_object);
// new_string の現在の値は、「1 が最初の変数、2 は常に 2 番目、3 はブロンズに飽きています...」

実際には、代替メソッドを使用するには、substitution_object オブジェクトを作成する必要があります。それが適切ではないと思われる場合は、次のメソッドを実装することもできます。
参照コード:

コードをコピー コードは次のとおりです:

// 置換する文字列を作成します
var text_for_substitute = "{substitute_key} と元の文字列を作成しますtext";
// Put 置換されるオブジェクトはパラメータとして置換メソッドに渡されます
var result_text = text_for_substitute.substitute({substitute_key : 'substitute_value'});
// result_text は現在"substitute_value と元のテキスト"

このメソッドをもう少し進めると、DOM オブジェクトから値を置換の値として取得する関数呼び出しを使用できます。可能。
参照コード:

コードをコピー コードは次のとおりです:

var replaceDemo = function() {
// テキストフィールドから元のテキストを取得します
varoriginal_text = $('substitute_span').get('html');
// テキストフィールドの値を値に置き換えますテキストボックス内
var new_text =original_text.substitute({
first : $('first_value').get('value'),
second : $('first_value').get('value '),
third : $('third_value').get('value'),
}); Span の内容を新しいテキストに置き換えます
$('substitute_span') .set(' html', new_text);
// 代替ボタンを無効にし、リセット ボタンを有効にします
$('simple_substitute').set('disabled', true); >$('simple_sub_reset' ).set('disabled', false);
}
varstituteReset = function(){
// 元のテキストを保存する変数を作成します
varoriginal_text = "|- {first } -- {second} -- {third} -|"
// spain の内容を元のテキストに置き換えます
$('substitute_span').set('html', original_text);
// リセット ボタンを無効にして
// 代替を有効にします
$('simple_sub_reset').set('disabled', true); '無効' 、 false);
}


|- {first} -- {second} -- {third} -|
first_value
Second_value

third_value
at 今日を終える前に、非常に小さなヒントですが、文字列に対して replace メソッドを呼び出し、置換されるキーワードのキー/値ペア オブジェクトを指定しない場合、中括弧内のコンテンツが単純に削除されます。 。したがって、中括弧内の文字列を保持する必要がある場合は、このメソッドを使用しないように注意してください。たとえば、次のようになります。
参照コード:




コードをコピー

コードは次のとおりです: ("{1} いくつかの内容 {2} いくつかのその他の内容").substitute({one : '置換テキスト'});

これは「置換テキスト いくつかの内容」を返しますもの"。

さらに詳しく

開始するために必要なものが含まれた zip パッケージをダウンロードします

文字列の奇妙なパターン

• (この人は素晴らしい) JavaScript 文字列関数リファレンス
• MooTools 文字列ドキュメント