Selection과 Range

 안녕하세요? 김성중입니다.

 Google Web Speech API를 테스트하던 중, STT를 통해 변환된 텍스트를 획득하기 위한 방법으로 Selection을 사용하였습니다. Selection(MSDN은 TextRange)은 웹 페이지에서 텍스트 행위를 하고자 할 때, 마우스를 이용해 드래그를 하거나 글자 위에서 더블 클릭을 하는 이벤트를 자바스크립트 영역에서 획득할 수 있게 해주는 Web API입니다.

 예제 코드를 실행해보고 콘솔에서 선택된 텍스트를 직접 확인해 보세요.

 Selection은 window.getSelection()이나 다른 메소드의 호출로 생성되는 객체입니다. 그리고 이러한 Selection 객체는 사용자가 선택한 'range'로 표현됩니다. 보통 한 개의 range만 갖고 있고, 다음과 같은 코드로 가져올 수 있습니다.

var selObj = window.getSelection();    // Selection 객체
var range = selObj.getRangeAt(0);      // Range 객체

 선택된 값은 Selection 객체의 toString()을 호출해서 가져올 수 있습니다.


 저는 Web Speech API를 통해 사용자가 입력한 음성을 텍스트로 변환(Speech-To-Text, STT)한 다음, 해당 텍스트를 획득하기 위해 Selection 객체를 사용하였습니다.

if (window.getSelection) {
    window.getSelection().removeAllRanges();
    var range = document.createRange();
    range.selectNode(document.getElementById('final_span'));
    window.getSelection().addRange(range);
}

 위 코드는 음성 인식이 종료되었을 때 호출되는 코드입니다. 윈도우에 텍스트가 존재할 경우, 전체 텍스트를 삭제하고, range 객체를 새로 생성하여 Selection에 지정해주는 코드입니다. 이러한 방법으로 웹에서 Selection객체와 Range 객체를 사용하면 사용자를 대신해서 특정 텍스트 영역을 선택, 삭제 할 수 있고, 사용자가 임의로 선택한 영역의 텍스트도 가져올 수 있습니다.

감사합니다.



참조
MDN, https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection
MSDN, http://msdn.microsoft.com/en-us/library/ie/ms536401(v=vs.85).aspx