일반 표현식 예제: Wiki 파서

Flash Player 9 이상, Adobe AIR 1.0 이상

다음에 나오는 간단한 Wiki 텍스트 변환 예제에서는 다양한 일반 표현식 사용 방법을 보여 줍니다.

  • 소스 Wiki 패턴과 일치하는 텍스트 행을 적절한 HTML 출력 문자열로 변환

  • 일반 표현식을 사용하여 URL 패턴을 HTML <a> 하이퍼링크 태그로 변환

  • 일반 표현식을 사용하여 미국 달러 문자열(예: "$9.95" )을 유로 문자열(예: "8.24 €" )로 변환

이 샘플에 대한 응용 프로그램 파일을 가져오려면 www.adobe.com/go/learn_programmingAS3samples_flash_kr 을 참조하십시오. WikiEditor 응용 프로그램 파일은 Samples/WikiEditor 폴더에 있으며 이 응용 프로그램은 다음과 같은 파일로 구성됩니다.

파일

설명

WikiEditor.mxml

또는

WikiEditor.fla

Flash(FLA) 또는 Flex(MXML) 형식의 기본 응용 프로그램 파일입니다.

com/example/programmingas3/regExpExamples/WikiParser.as

일반 표현식을 사용하여 Wiki 입력 텍스트 패턴을 동일한 HTML 출력으로 변환하는 메서드가 포함된 클래스입니다.

com/example/programmingas3/regExpExamples/URLParser.as

일반 표현식을 사용하여 URL 문자열을 HTML <a> 하이퍼링크 태그로 변환하는 메서드가 포함된 클래스입니다.

com/example/programmingas3/regExpExamples/CurrencyConverter.as

일반 표현식을 사용하여 미국 달러 문자열을 유로 문자열로 변환하는 메서드가 포함된 클래스입니다.

WikiParser 클래스 정의

WikiParser 클래스에는 Wiki 입력 텍스트를 동일한 HTML 출력으로 변환하는 메서드가 포함되어 있습니다. 이 클래스는 강력한 기능의 Wiki 변환 응용 프로그램은 아니지만 일반 표현식을 사용하여 패턴 일치 및 문자열 변환을 수행하는 몇 가지 방법을 자세히 보여 줍니다.

생성자 함수는 다음과 같이 setWikiData() 메서드와 함께 Wiki 입력 텍스트의 샘플 문자열을 초기화합니다.

public function WikiParser() 
{ 
    wikiData = setWikiData(); 
}

사용자가 샘플 응용 프로그램에서 [Test] 버튼을 클릭하면 응용 프로그램에서 WikiParser 객체의 parseWikiString() 메서드를 호출하고, 이 메서드는 결과 HTML 문자열을 차례로 어셈블하는 다른 여러 메서드를 호출합니다.

public function parseWikiString(wikiString:String):String 
{ 
    var result:String = parseBold(wikiString); 
    result = parseItalic(result); 
    result = linesToParagraphs(result); 
    result = parseBullets(result); 
    return result; 
}

호출된 parseBold() , parseItalic() , linesToParagraphs() parseBullets() 메서드는 각각 문자열의 replace() 메서드를 사용하여 일반 표현식으로 정의된 일치 패턴을 바꿉니다. 이를 통해 Wiki 입력 텍스트를 HTML 형식 텍스트로 변환할 수 있습니다.

굵은체 및 기울임체 패턴 변환

parseBold() 메서드는 다음과 같이 Wiki 굵은체 텍스트 패턴(예: '''foo''' )을 검색한 후 동일한 HTML 형식(예: <b>foo</b> )으로 변환합니다.

private function parseBold(input:String):String 
{ 
    var pattern:RegExp = /'''(.*?)'''/g; 
    return input.replace(pattern, "<b>$1</b>"); 
}

이때 일반 표현식의 (.?*) 부분은 정의된 두 ''' 패턴 사이에 있는 모든 문자( * )를 찾습니다. 이때 ? 한정 기호는 최장 일치가 수행되지 않도록 하는 역할을 합니다. 즉, '''aaa''' bbb '''ccc''' 와 같은 문자열에 대해 첫 번째로 일치하는 문자열은 ''' 패턴으로 시작하고 끝나는 전체 문자열이 아니라 '''aaa''' 가 됩니다.

일반 표현식의 괄호는 캡처 그룹을 정의하고 replace() 메서드는 대체 문자열에서 $1 코드를 사용하여 이 그룹을 참조합니다. 일반 표현식에 g ( global ) 플래그를 설정하고 replace() 메서드를 호출하면 문자열에서 일치하는 첫 번째 항목 및 모든 항목이 대체됩니다.

parseItalic() 메서드는 parseBold() 메서드와 비슷하지만 기울임체 텍스트에 대한 구분 기호로 세 개가 아니라 두 개의 아포스트로피( '' )를 확인한다는 차이가 있습니다.

private function parseItalic(input:String):String 
{ 
    var pattern:RegExp = /''(.*?)''/g; 
    return input.replace(pattern, "<i>$1</i>"); 
}

불릿 패턴 변환

다음 예제와 같이 parseBullet() 메서드는 Wiki 불릿 행 패턴(예: * foo )을 검색한 후 동일한 HTML 형식(예: <li>foo</li> )으로 변환합니다.

private function parseBullets(input:String):String 
{ 
    var pattern:RegExp = /^\*(.*)/gm; 
    return input.replace(pattern, "<li>$1</li>"); 
}

일반 표현식의 맨 앞에 ^ 심볼이 있으면 행의 시작 위치를 찾으며, m ( multiline ) 플래그가 설정되어 있으면 ^ 심볼이 문자열의 시작 위치 및 행의 시작 위치에 대응됩니다.

\* 패턴은 별표 문자를 찾습니다. 이때 * 한정 기호 대신 리터럴 별표를 나타내기 위해 백슬래시가 사용됩니다.

일반 표현식의 괄호는 캡처 그룹을 정의하고 replace() 메서드는 대체 문자열에서 $1 코드를 사용하여 이 그룹을 참조합니다. 일반 표현식에 g ( global ) 플래그를 설정하고 replace() 메서드를 호출하면 문자열에서 일치하는 첫 번째 항목 및 모든 항목이 대체됩니다.

Wiki 단락 패턴 변환

linesToParagraphs() 메서드는 Wiki 입력 문자열의 각 행을 HTML <p> 단락 태그로 변환합니다. 메서드의 이러한 행은 Wiki 입력 문자열에서 빈 행을 제거합니다.

var pattern:RegExp = /^$/gm; 
var result:String = input.replace(pattern, "");

일반 표현식에 ^ $ 심볼이 있으면 행의 시작 및 끝 위치를 찾으며, m ( multiline ) 플래그가 설정되어 있으면 ^ 심볼이 문자열의 시작 위치 및 행의 시작 위치에 대응됩니다.

replace() 메서드는 일치하는 모든 하위 문자열(빈 행)을 빈 문자열( "" )로 바꿉니다. 일반 표현식에 g ( global ) 플래그를 설정하고 replace() 메서드를 호출하면 문자열에서 일치하는 첫 번째 항목 및 모든 항목이 대체됩니다.

URL을 HTML <a> 태그로 변환

사용자가 urlToATag 체크 상자를 선택한 경우 샘플 응용 프로그램에서 [Test] 버튼을 클릭하면 응용 프로그램에서 URLParser.urlToATag() 정적 메서드를 호출하여 Wiki 입력 문자열의 URL 문자열을 HTML <a> 태그로 변환합니다.

var protocol:String = "((?:http|ftp)://)"; 
var urlPart:String = "([a-z0-9_-]+\.[a-z0-9_-]+)"; 
var optionalUrlPart:String = "(\.[a-z0-9_-]*)"; 
var urlPattern:RegExp = new RegExp(protocol + urlPart + optionalUrlPart, "ig"); 
var result:String = input.replace(urlPattern, "<a href='$1$2$3'><u>$1$2$3</u></a>");

RegExp() 생성자 함수는 다양한 구성 요소에서 일반 표현식( urlPattern )을 어셈블하는 데 사용됩니다. 이러한 구성 요소는 일반 표현식 패턴의 항목을 정의하는 각 문자열입니다.

protocol 문자열로 정의된 일반 표현식 패턴의 첫 번째 항목은 URL 프로토콜( http:// 또는 ftp:// )을 정의합니다. 괄호는 ? 심볼로 나타내는 비캡처 그룹을 정의합니다. 즉, 괄호는 | 패턴의 그룹을 정의하는 데만 사용되며 이 그룹은 replace() 메서드의 대체 문자열에서 역참조 코드( $1 , $2 , $3 )와 일치하지 않습니다.

일반 표현식의 다른 구성 요소는 각각 일반 표현식 패턴에서 괄호로 표시되는 캡처 그룹을 사용하고 이러한 그룹은 replace() 메서드의 대체 문자열에서 역참조 코드( $1 , $2 , $3 )에 사용됩니다.

urlPart 문자열에 의해 정의된 패턴 부분은 a-z , 0-9 , _ 또는 - 문자 중 최소한 하나 이상을 찾습니다. + 한정 기호는 최소한 하나 이상의 문자를 찾는다는 것을 나타내고 \. 는 필수 도트( . ) 문자를 나타냅니다. 또한 나머지 항목은 a-z , 0-9 , _ 또는 - 문자 중 최소한 하나 이상의 다른 문자열을 찾습니다.

optionalUrlPart 문자열에 의해 정의된 패턴 부분은 도트( . ) 문자와 모든 영숫자 문자( _ - 포함)가 차례로 나오는 항목을 0개 이상 찾습니다. * 한정 기호는 0개 이상의 문자를 찾는다는 것을 나타냅니다.

replace() 메서드를 호출하면 일반 표현식이 사용되고 역참조를 통해 대체 HTML 문자열이 어셈블됩니다.

그러면 urlToATag() 메서드에서 emailToATag() 메서드를 호출합니다. 이 메서드는 비슷한 방법을 사용하여 전자 메일 패턴을 HTML <a> 하이퍼링크 문자열로 바꿉니다. 이 샘플 파일에서는 사용자의 이해를 돕기 위해 매우 간단한 일반 표현식을 제공하여 HTTP, FTP 및 전자 메일 URL을 찾습니다. 그러나 이러한 URL을 정확하게 찾기 위해 사용되는 일반 표현식은 훨씬 복잡합니다.

미국 달러 문자열을 유로 문자열로 변환

사용자가 dollarToEuro 체크 상자를 선택한 경우 샘플 응용 프로그램에서 [Test] 버튼을 클릭하면 응용 프로그램에서는 다음과 같이 정적 메서드 CurrencyConverter.usdToEuro() 를 호출하여 미국 달러 문자열(예: "$9.95" )을 유로 문자열(예: "8.24 €" )로 변환합니다.

var usdPrice:RegExp = /\$([\d,]+.\d+)+/g; 
return input.replace(usdPrice, usdStrToEuroStr); 

첫 번째 행은 미국 달러 문자열을 찾기 위한 간단한 패턴을 정의합니다. 이때 $ 문자 앞에 백슬래시( \ ) 이스케이프 문자가 추가됩니다.

replace() 메서드는 일반 표현식을 패턴 매처로 사용하고 usdStrToEuroStr() 함수를 호출하여 대체 문자열, 즉 유로 값을 확인합니다.

함수 이름이 replace() 메서드의 두 번째 매개 변수로 사용되는 경우에는 호출된 함수에 다음 항목이 매개 변수로 전달됩니다.

  • 문자열의 일치 부분

  • 캡처한 괄호 그룹 일치 항목. 이런 방식으로 전달되는 인수의 수는 캡처한 괄호 그룹 일치 항목의 수에 따라 다릅니다. 함수 코드 내에서 arguments.length - 3 을 확인하면 캡처한 괄호 그룹 일치 항목의 수를 알 수 있습니다.

  • 문자열에서 검색을 시작할 인덱스 위치

  • 전체 문자열

usdStrToEuroStr() 메서드는 다음과 같이 미국 달러 문자열 패턴을 유로 문자열로 변환합니다.

private function usdToEuro(...args):String 
{ 
    var usd:String = args[1]; 
    usd = usd.replace(",", ""); 
    var exchangeRate:Number = 0.828017; 
    var euro:Number = Number(usd) * exchangeRate; 
    trace(usd, Number(usd), euro); 
    const euroSymbol:String = String.fromCharCode(8364); // € 
    return euro.toFixed(2) + " " + euroSymbol;  
}

args[1] usdPrice 일반 표현식을 사용하여 캡처한 괄호 그룹을 나타냅니다. 이는 미국 달러 문자열의 숫자 부분, 즉 $ 심볼이 없는 달러 금액 부분입니다. 이 메서드는 환율 변환을 적용하고 결과 문자열(앞의 $ 심볼 대신 뒤에 € 심볼 추가)을 반환합니다.