2007년 10월 14일 일요일

designMode 를 On 한 iframe 에서 순수 텍스트만 간편하게 추출하기 ( FF 테스트되지 않음 )

FF 에서는 테스트되지 않았음. IE7 에서만 테스트함.

일반적으로 네이버의 스마트에디터나(아마도?) 태터툴스와 편집모드 등은 흔히 iframe 을

designMode = 'On'

이라는 식으로 설정해서 사용한다. (차이점이 있다면 FF 는 해당 페이지가 모두 로딩된 다음, 즉 OnLoad 시에만 세팅할 수 있다는 정도?)

그리고 각종 designMode 에서 쓸 수 있는 별도의 명령어들을 사용하든지, .. 능력만 된다면 innerHTML 에다가 직접 하드코딩을 해서 삽입해버리거나 하면 된다.

알려진 바와 같이 textarea 에서는 text 이외에는 그 어떤 HTML 적 요소들을 사용할 수 없고, 태그를 사용하더라도 실제로 반영되지 않기 때문에 이미지를 링크해서 보여준다든지, 폰트의 색깔을 바꾼다든지 bold로 한다든지 하는 모든 웹상의 편집기능은 이 designMode 가 On 된 iframe 으로 구현하게 된다.

IE에서만 테스트해보았지만. 이 상태에서 해당 iframe 의 innerHTML 을 가져오면 온갖 자신이 입력하지 않은 tag 들과 기타 등등의 코드들을 볼 수 있는데(줄바꿈 태그가 들어간다든가 기타등등...), 만약 이 중에서 HTML 태그가 아닌 text 만을 추출해야 될 필요성이 있는 경우(이를테면 SMS로 발송한다든지, HTML을 인식하지 않는 검색엔진 색인기에 텍스트를 넣어야 한다든가 하는..), 모든 HTML적 요소들을 일일이 파싱해 내는것이 여간 귀찮은 일이 아니다.  
< 가 나오면 그 다음 무조건 > 가 나올때까지 죄다 skip 해버리는식으로 간단하게 작성해서 쓰는 방법도 있겠지만... <title> 어쩌구저쩌구.. </title> 이런식으로 iframe 에 HTML 이 들어가 있는것들도 죄다 파싱? css 태그는 ??

경험상 가장 간단한 방법은 innerHTML 을 사용하지 말고 innerText 를 사용하는게 가장 편리하다.

innerText 를 사용해서 값을 가져오면 온갖 잡스런 HTML 태그들을 죄다 사라진채로 text와 개행문자등의 비HTML적 요소들만 뽑아서 값을 리턴해준다.

실제로 지금 개발중인 MMS G/W 웹페이지에서 SMS는 이런식으로 발송하고 있다.
(어차피 ActiveX 가 붙어버려서 IE 전용 사이트가 되어버렸기에... )


댓글 없음:

댓글 쓰기

가장 많이 본 글