Mootools 1.2 튜토리얼 입력 필터링 2부(문자열)

우리는 정규식에 대한 기본 지식과 MooTools에서의 사용법을 다루기 위해 앞으로 또 다른 강의를 진행할 것입니다.
시작하기 전에 문자열 함수가 어떻게 호출되는지 잠시 살펴보겠습니다. 제 경우에는 다음과 같이 문자열 변수에서 이 메서드를 직접 호출했습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

 
var my_text_variable = "여기에 텍스트가 있습니다."; 
// 결과 문자열 변수 메서드 이름
var result_of_function = my_text_variable.someStringFunction() 

하지만 더 명확하게 설명하기 위해 이렇게 썼습니다. 이러한 문자열 함수는 다음과 같이 변수를 선언하지 않고 문자열에서 직접 호출할 수도 있다는 점을 이해해야 합니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

 
var result_of_function = "여기에 텍스트가 있습니다." .someStringFunction(); 🎜>
 

이 방법은 MooTools의 숫자 처리 기능에도 유효합니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

// 사용법에 유의하세요. 작은따옴표로 묶인 문자열이 아닌 괄호 안의 숫자입니다. 
// 
var Limited_number = (256) .limit(1, 100); 

 

또한 이 점을 다시 강조하고 싶습니다. JavaScript로 입력을 필터링하면 데이터가 서버로 전송되기 전에 안전하게 필터링되지 않습니다. JavaScript로 작성한 모든 내용은 웹 뷰어가 보고, 조작하고, 비활성화할 수 있습니다. 앞으로 MooTools의 Request 클래스에 대해 이야기할 때 PHP 필터링 기술에 대해 간략하게 논의하겠습니다. 그 동안에는 서버 측에서 보안과 관련된 작업을 계속 수행하고 JavaScript에 의존하지 마십시오.
trim()
trim 함수는 처리하려는 문자열의 양쪽 끝에서 공백 문자를 제거하는 간단하고 직접적인 방법을 제공합니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

// 우리가 원하는 문자열은 
var text_to_trim = " nString With Whitespace "; 
 // 잘라낸 문자열은 "String With Whitespace"입니다. 
var Trimmed_text = text_to_trim.trim(); 
n을 본 적이 없다면 그냥 개행 문자일 뿐입니다. 문자열 내에서 이를 사용하여 문자열을 여러 줄로 분할할 수 있습니다. Trim 메소드는 개행 문자를 공백 문자로 처리하므로 개행 문자도 제거됩니다. Trim 메소드가 수행하지 않는 유일한 특별한 일은 문자열에서 추가 공백 문자를 제거하지 않는다는 것입니다. 다음 예에서는 Trim이 문자열의 줄 바꿈을 처리하는 방법을 보여줍니다. 
참조 코드: 

코드 복사 코드는 다음과 같습니다. var TrimDemo = function(){

// 다듬고 싶은 문자열 설정

var text_to_trim = '너무 많은 공백'; 
// 다듬기
var Trimmed_text = text_to_trim .trim(); 
// 결과 표시
alert('자르기 전 : n' 
'|-' text_to_trim '-|nn' 
'자르기 후 : n ' 
'| -' Trimmed_text '-|'); 
} 

 

clean() 

더 이해하기 쉽게 문자열에 포함된 모든 공백 문자를 제거할 필요는 없습니다. 다행스럽게도 MooTools는 여러분이 강하게 느끼는 공백 문자에 대해 clean() 메소드를 아낌없이 제공합니다.
참조 코드:

코드 복사 코드는 다음과 같습니다. // 우리가 원하는 문자열은

var text_to_clean = " nString nWith Lots n n More nWhitespace n "

// 정리 후의 문자열은 "String With Much 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() 메서드와 유사, contain() 이 방법은 다른 추가 기능 없이 매우 간단한 작업을 수행합니다. 문자열에 찾고 있는 문자열이 포함되어 있는지 확인하고, 찾고 있는 문자열이 있으면 true를 반환하고, 찾지 못하면 false를 반환합니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

 
// 이 찾기를 문자열에서 사용하고 싶습니다. 
var string_to_match = "이 내용이 작동합니까?" 
// 'contain' 찾기, did_string 일치가 true 
var did_string_match = string_to_match.contains('contain' ); 
// 'propane'을 찾으면 did_string_match가 false입니다. 
did_string_match = string_to_match.contains('propane'); 

이 방법은 다음과 같은 경우에 유용할 수 있습니다. 및 기타 강의 3에서 설명한 Array.each() 함수와 같은 도구와 함께 사용하면 상대적으로 적은 코드로 약간 복잡한 작업을 완료할 수 있습니다. 예를 들어 일련의 단어를 배열에 넣은 다음 하나씩 반복하면 텍스트의 동일한 영역에서 더 적은 코드로 여러 단어를 찾을 수 있습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

 
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 containDemo = function() { 
// 금지하려는 단어를 배열에 넣습니다 
varbaned_words = ['drat', 'goshdarn', 'fiddlesticks', 'kumquat']// Get the 텍스트 필드의 단어 Content
var textarea_input = $('textarea_1').get('value') 
// 필터 단어의 각 단어 열거
banned_words.each(function(banned_word)) 
 // 텍스트 영역 콘텐츠에서 현재 필터 단어를 찾습니다. 
if (textarea_input.contains(banned_word)){ 
// 해당 단어를 사용할 수 없다고 사용자에게 알립니다. 
alert(banned_word '는 허용되지 않음'); 
}); 
} 

 

substitute() 

substitute()는 매우 강력한 도구입니다. 오늘 우리는 이에 대한 몇 가지 기본 지식에 대해서만 이야기할 것입니다. 대체의 더 강력한 기능은 정규 표현식의 사용에서 비롯됩니다. 이에 대해서는 나중에 설명하겠습니다. 하지만 이러한 기본 기능만으로도 많은 일을 할 수 있습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

 
// 대체 방법을 사용하기 위한 텍스트 템플릿입니다 
// 교체할 부분은 모두 중괄호로 묶여있습니다. 
var text_for_substitute = "One is {one}, Two {two}, Three is { three}."; 
// 이 객체에는 대체할 규칙이 포함되어 있습니다 
// 따옴표로 묶이지 않은 부분은 검색어입니다 
// 따옴표로 묶음 부분은 검색어를 대체하는 데 사용된 문장입니다. 
var replacement_object = { 
one : '첫 번째 변수', 
two : '항상 두 번째로 온다', 
 three : '브론즈 질림' .' 
} 
// text_for_substitute에서 대체 메소드 호출 
// replacement_object를 매개변수로 전달 
// 대체 결과를 new_string 변수에 지정 
var new_string = text_for_substitute. 대체(substitution_object); 
//new_string의 현재 값은 "하나는 첫 번째 변수이고, 두 개는 항상 두 번째이고, 세 개는 브론즈에 질려요..."입니다. 

사실 당신은 대체 방법을 사용하려면 replacement_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 replacementDemo = function() { 
// 텍스트 필드에서 원본 텍스트 가져오기
var original_text = $('substitute_span').get('html') 
// 텍스트 필드의 값을 해당 값으로 바꿉니다. 텍스트 상자
var new_text = original_text.substitute({ 
first : $('first_value').get('value'), 
second : $('second_value').get('value '), 
third : $('third_value').get('value'), 
}) 
// 범위의 콘텐츠를 새 텍스트로 교체 
$('substitute_span') .set(' html', new_text); 
// 대체 버튼 비활성화
// 재설정 버튼 활성화
$('simple_substitute').set('disabled', true); >$('simple_sub_reset' ).set('disabled', false); 
} 
var replacementReset = function(){ 
// 원본 텍스트를 저장할 변수를 만듭니다. 
var original_text = "|- {첫 번째 } -- {두 번째} -- {세 번째} -|"; 
// 범위의 내용을 원본 텍스트로 바꿉니다 
$('substitute_span').set('html', original_text);// 재설정 버튼 비활성화 
// 대체 활성화 
$('simple_sub_reset').set('disabled', true) 
$('simple_substitute').set( '비활성화됨' , false) 
} 

 
|- {첫 번째} -- {두 번째} -- {세 번째} -| 

첫 번째_값
두 번째_값
세 번째_값
오늘 끝내기 전에 아주 작은 팁 하나를 드리자면, 문자열에서 대체 메소드를 호출하고 대체할 키워드에 대한 키/값 쌍 객체를 제공하지 않으면 중괄호 안의 내용만 삭제됩니다. . 따라서 중괄호 안의 문자열을 보존해야 하는 경우에는 이 방법을 사용하지 않도록 주의하시기 바랍니다. 예를 들면 다음과 같습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

("{one} some stuff {two} some more stuff").substitute({one : 'substitution text'})

이것은 "substitution text some stuff some more"를 반환합니다. 물건".

자세히 알아보기

시작하는 데 필요한 내용이 포함된 zip 패키지를 다운로드하세요.