[js] 텍스트 영역 선택 하기

예전에 잠시 서비스 되었다가 현재는 서비스 되고 있지 않은 웹 페이지에 붙이는 펜 서비스가 있었습니다. 그때 어떤식으로 그런걸 구현할 수 있었는지 궁금한 마음에 찾아보다가 스크랩 해놨던 걸 몇일 전에 다시 보게 되었습니다.

이제와서 다시 한번 살펴보니 당시에 서비스 했던 그 펜 서비스가 이걸 사용해 개발되었는지 잘 모르겠고.. 게다가, 이 녀석을 사용할곳이 과연 있을까 싶기는 하지만.. 언젠가는 쓰지 않을까 하는 마음에 정리해봅니다;;

웹페이지에서 텍스트를 선택하는 행위를 하고자 할 때, 마우스를 이용해 드래그를 하거나 글자위에서 더블클릭을 하곤 합니다. 이런 일련의 이벤트를 javascript 를 통해서도 할 수 있는데,
그것을 할 수 있게 해주는 것이 Selection (MSDN은 TextRange) 입니다.

우선 예제를 보면

function selectRange(obj) {
    if (window.getSelection) {
        var selected = window.getSelection();
            selected.selectAllChildren(obj);
        //console.log(selected.toString());
    } else if (document.body.createTextRange) {
        var range = document.body.createTextRange();
            range.moveToElementText(obj);
            range.select();
        //alert(range.htmlText);
    }
};

http://jsfiddle.net/rootbox/D4kaG/ 에서 직접 실행해보고 코드를 수정해 볼 수 있습니다.

selectRange(DOM객체) 함수가 하는 역할은 인자로 받은 DOM객체 영역을 선택해주는 것 입니다.
(주석처리된 5라인과, 10라인은 선택된 영역의 내용을 보여주는 부분입니다.)

selection과 TextRange 에 대한 좀 더 자세한 내용은
https://developer.mozilla.org/en/DOM/window.getSelection
http://msdn.microsoft.com/en-us/library/ie/ms536401(v=vs.85).aspx
에서 보실 수 있습니다.

위 레퍼런스를 보면 상기 코드처럼 사용자를 대신에 특정 영역을 선택할 수 있고,
사용자가 임의로 선택된 영역의 내용을 가져올 수 도 있습니다.
물론, 더 많은 일들도 할 수 있죠~

활용은 여러분의 몫입니다.;.. 분명 어딘가 유용하게 쓰이긴 할 것 같단 말이죠!

덧, 오래전 스크랩이라 출처가 기억나지 않습니다. 원작자분에 대한 최소한의 예의로 코드를 좀 손봤…(응?) 습니다.