2008년 5월 23일 금요일

정규식으로 구현한 BBCode [embed]

사용자 삽입 이미지

정규식(Regular Expression)은 문자열을 검색 및 치환할 때 사용할 수 있는 강력한 도구입니다.
더욱이 상대적으로 속도가 느린 JavaScript 환경에서는 복잡한 문자열 처리를 빠르게 할 수 있는 도구이기도 합니다.

이번에 BBCode for Tistory 2.1를 만드는 과정에서 동영상을 올릴 수 있는 embed 태그를 추가했는데, 만드는 과정에서 의외의 어려움이 있었고, 이 문제를 해결하는 과정이 재미있었습니다.

이 과정을 지금부터 설명하겠습니다.



1. 구현된 Embed 태그의 문법

[embed=주소 (폭) (높이)]
[embed=http://kr.youtube.com/watch?v=Dii3mzMQ3SQ 640 480]
[embed=http://kr.youtube.com/watch?v=Dii3mzMQ3SQ&feature=related]
[embed=http://kr.youtube.com/v/Dii3mzMQ3SQ]
[embed=http://flvs.daum.net/flvPlayer.swf?vid=3xvdXKNmuUo$]

이와 같은 다양한 주소 형태를 지원합니다.


2. 코드의 구현

a.  기본 크기(425×355) 지정

폭과 높이가 지정되지 않은 경우를 위해 기본 크기를 지정합니다.
더불어 문자열 검색을 손쉽게 하기 위해 더미 문자열로 none도 추가합니다.
(뒷쪽 코딩을 간결하게 하기 위함입니다)
str = str.replace(/(\[embed=.+?)]/gi, '$1 425 355 none ]');
b. 옵션 제거

YouTube등의 동영상 서비스는 & 기호 뒤에 옵션을 붙입니다. 이 옵션을 제거합니다.
str = str.replace(/(\[embed=.+?)&amp.+?\s(.+?)]/gi, '$1 $2 ]');
c. /watch?v=* 의 주소를 embed용 주소(/v/*)로 변환

YouTube에서는 사이트에서 보는 주소(URL)의 포맷과 embed용 주소의 포맷이 서로 다릅니다.
사이트 URL를 입력한 경우 embed용 주소로 변환해줍니다.
str = str.replace(/(\[embed=.+?)\/watch\?v=(.+?)]/gi, '$1/v/$2]');
d. HTML의 embed 코드로 변환

여기까지 왔으면 어려운 작업은 다 끝났습니다.
적절한 embed 포맷으로 변환해주면 됩니다.
동영상 주소 뒤에 크기가 줄줄 달려있는데, 맨 앞의 둘만 추출하면 폭과 너비가 나옵니다.
str = str.replace(/\[embed=(.+?)\s(.+?)\s(.+?)\s.+?]/gi, '<center><embed src=\"$1\" width=\"$2\" height=\"$3\"></center>');
※ 실제로 구현할 때는 이 코드들을 아래와 같이 한 줄에 붙여서 넣어야 합니다.
str = str.replace(/정규식/gi, '새 문자열').replace(/정규식/gi, '새 문자열');

정말 쉽죠? (밥 아저씨 버전)


  

댓글 4개:

  1. trackback from: BBCode for Tistory 2.1 공개
    티스토리용 BBCode가 2.1로 업그레이드 되었습니다. 이 BBCode의 장점은 아래와 같습니다. 1. 티스토리의 답글에 생명력을 불어넣을 수 있음 물론, 이것은 BBCode의 특징입니다. 2. 설치/제거가 쉬움 파일 1개를 업로드한 뒤 스킨 수정 프로그램만 돌리면 됩니다. 스킨 수정을 한칼에 해주는 프로그램이 있기 때문에 설치/제거가 쉽습니다. (실제로 수정되는 내용은 v1.1a와 거의 같습니다) 3. 티스토리 버그로 인해 [url=]을 입력할..

    답글삭제
  2. 통째로 갖다붙여도 되게끔 하셨군요~

    플러그인으로 써먹으려면 연구좀 해야겠네요. 잘먹겠습니다~(만세!)



    덧. [ru]내일 전화드릴게요^^[/ru]

    답글삭제
  3. @okto - 2008/05/23 22:33
    공부하세용~ [bb]^^;;[/bb]

    답글삭제
  4. @okto - 2008/05/23 22:33
    참, BBCode 2.1에서는 <embed> 태그를 사용하지 않고, 티스토리의 동영상 코드를 슬쩍 베껴 <object> 등을 섞은 복잡한 태그를 사용했습니다.

    이게 왜 좋은지는 모르겠지만요…

    답글삭제