코드쓰는사람

Range 객체는 문서에서 선택된 영역의 데이터를 추출하거나 조작할 때 사용하는 객체입니다. 인터넷 익스플로러를 제외한 대부분의 브라우저는 DOM Level2에 정의된 Range 스펙을 따르고 있습니다. DOM은 표준 스펙이지만, IE TextRange의 pasteHTML 메소드를 사용할 수 없다는 점은 아쉬운 부분입니다. 예를 들어, IE에서는 다음과 같이 선택 영역의 텍스트를 치환하거나 새로운 텍스트를 삽입할 수 있었습니다.

var sel = document.selection;
 if (sel) {
     var rng = sel.createRange();
     if (!rng) rng.pasteHTML("<strong>Hello, <em>World!</em></strong>");
 }

[adsense]

이 기능을 DOM Level2의 Range 객체를 사용하면 다음과 같이 구현할 수 있습니다.

var sel = document.getSelection();
 if (sel.rangeCount) {
     var rng  = sel.getRangeAt(0);
     var frag =document.createDocumentFragment();
     var div  = document.createElement("div");
     div.innerHTML = "<strong>Hello, <em>World!</em></strong>";
     while(div.firstChild) {
         frag.appendChild(div.firstChild);
      }
     rng.deleteContents();
     rng.insertNode(frag);
 }

이 코드는 파이어폭스, 구글 크롬, 오페라 브라우저에서 정상적으로 동작하는 것을 확인했습니다.