자바스크립트를 사용하여 마우스로 드래그 한 경우 해당 텍스트, 문자열에 대하여 어떤 일을 수행하는 경우가 많더군요. 그래서 드래그한 부분을 변경하거나 앞 또는 뒤에 추가, 삭제 등등 여러가지 일을 할 수 있는 소스를 만들어봤습니다. 순수 자바스크립트로 작성하였으며 자세한 기능은 아래를 참고하세요.




# 자바스크립트로 드래그한 영역 가져오기, 삭제하기, 바꾸기
먼저 마우스로 특정 영역을 드래그한 후에 아래의 커맨드를 입력하면 해당 기능을 수행합니다. 어떤 기능이 있는지 알아보면...

  • TEXT로 가져오기 - wfSel.getTEXT()
  • HTML 코드로 가져오기 - wfSel.getHTML()
  • 특정 문자열, 태그 등을 추가하기 - wfSel.insert(before, after)
  • 해당 문자열을 바꾸기 - wfSel.replace(str)
  • 태그 삭제하기 - wfSel.removeTag()

매우 간단하게 사용가능합니다. 단순히 드래그 후 위와 같이 적용하면 되며 insert()의 경우 뭔가를 추가할 때 앞에 또는 뒤에만 넣을 수도 있습니다. 뒤에 넣을 경우 아래처럼 해보시기 바랍니다.

! 드래그 영역 문자나 HTML로 불러오기가장 많이 사용될 부분입니다. 아래처럼 원하는 방식으로 선택하여 호출합니다.
wfSel.getTEXT();
wfSel.getHTML();

! 뒤에만 엘리먼트 요소를 추가하기
이처럼 문자열 뿐만이 엘리먼트 등의 노드가 추가될 수 있습니다.
wfSel.insert('', '<span>abc</span>');

! 다른 문자로 치환, 바꾸기(html 가능)드래그한 부분을 다른 텍스트 '123'으로 바꾼다면 아래처럼 사용합니다.
wfSel.replace('123');

! 태그를 삭제하는 기능태그 삭제 기능 역시 추가하였습니다. 특별한 기능은 아니고 문자열로 반환하게 하여 텍스트만 가져와 보여주는 것 외에 다른 것은 없습니다.
wfSel.removeTag();


# 드래그 영역 조작하기 소스보기

실제 소스코드는 아래와 같습니다. wfSel 객체에 다양한 메소드를 추가하였습니다.

wfSel = {};
(function(_self) {
    var _sel = window.getSelection();
    if (_sel) {
        _self = {
            getTEXT: function() {
                var _range = window.getSelection().getRangeAt(0);
                return _sel.toString();
            },
            getHTML: function() {
                var _range = window.getSelection().getRangeAt(0),
                    _content = _range.cloneContents(),
                    _span = document.createElement('span');
                    _span.appendChild(_content);
                return _span.innerHTML;
            },
            insert(_before, _after) {
                _before = _before ? _before : '';
                _after = _after ? _after : '';
                this.replace(_before + wfSel.getHTML() + _after);
             },
            replace: function(text) {
                var _range = window.getSelection().getRangeAt(0);
                var _node = document.createElement('span');
                _node.innerHTML = text;
                if (_node) _node = _node.childNodes[0];
                _range.deleteContents();
                _range.insertNode(_node);
            },
            removeTag: function() {
                this.replace(wfSel.getTEXT());
            }
        };
        window.wfSel = _self;
    }
})(wfSel);

! 참고사항
위 코드는 window 객체에 getSelection()이 있는 경우에 정상적으로 작동합니다. webkit 엔진의 브라우저는 정상적으로 잘 동작하나 이를 지원하지 않는경우 정상동작하지 않을 수 있습니다. 이는 필요한 경우 나중에 추가하여 크로스브라우징 하도록 하겠습니다.