정규식으로 구현한 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, '새 문자열');

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