[JS] selection-range

Selection-range

선택 및 범위

기존 선택을 가져오고 전체 또는 부분적으로 선택하고 취소하고, 문서에서 선택한 부분을 제거하고 태그로 래핑 하는 등의 작업을 수행할 수 있습니다.

Range

선택의 기본 개념 Range: 기본적으로 한 쌍의 경계지점이며 범위 시작 및 범위 끝입니다.
각 포인트는 시작부터 상대적 오프셋이 있는 상위 DOM 노드로 표시됩니다.
부모노드가 요소 노드이면 오프셋은 자식 번호,
텍스트 노드의 겨우 텍스트에서 위치합니다.

Range 속성

• Range.collpased
  Range의 시작점과 끝점이 동일한지 여부
• Range.commonAncestorContainer
  시작 컨테이너와 끝 컨테이너를 포함하고 있는 상위 노드
• Range.endContainer
  Range가 끝나는 지점의 끝 컨테이너 노드
• Range.endOffset
  endContainer 노드에서 끝 지점의 오프셋
• Range.startContainer
  Range가 시작하는 지점의 컨테이너 노드
• RangestartOffset
  startContainer 노드에서 시작 지점의 오프셋

Range를 생성합니다.

let range = new Range();

사용할 선택경계를 설정 할 수 있습니다.
range.setStart(node, offset) 및 range.setEnd(node, offset)

아래의 코드로 예시를 알아보겠습니다.

<div id="rangeTest">
  Example: <i>Italic<i> and <b>bold></b>
</div>

부모노드가 요소노드이기 때문에
Example: : 0
<i>Italic</i>: 1
and : 2
<b>bold</b> : 3
로 자식번호가 구성 됩니다.

아래의 이미지 처럼
range.setStart(rangeTest,0) 범위 시작을 설정하고,
range.setEnd(rangeTest,2) 범위 끝을 설정합니다.
*setEnd는 끝이 포함되지 않는 특징이 있습니다.
아래의 이미지로 결과를 확인 할 수 있습니다.

이번에는 클릭하여 직접 입력한 범위 만큼 Range 를 선택해 보겠습니다.

위의 코드에서 <input type="number"> 를 통해 범위 설정을 해주고 이벤트를 주기위해 <button> 태그를 추가하 였습니다. range.setStart(rangeTest, start.value) 를 보시면 시작 범위 값을 넣어주고, range.setEnd(rangeTest, end.value) 에서 범위의 끝을 설정해주고 기존 선택 된 Range를 지우기 위해 removeAllRange() 로 초기화를 해주고 다시 Range를 추가 해주는것을 확인 할 수 있습니다.

텍스트 노드를 부분적으로 선택도 가능합니다.

위의 코드에서 range.setStart(rangeTest.firstChild, 2) 는 rangeTest의 첫번째 자식요소에서 2로 설정 되어져 있습니다. 그러므로 Example: 에서 a 부터 시작 offset 입니다. range.setEnd(rangeTest.querySelector('b').firstChild, 3) 은 rangeTest에서 b 태그를 선택해 첫번째 자식의 끝 offset은 3으로 설정 되어 있습니다.
<b> 자식 노드 첫번째는 bold 이고 offset이 3이어서 bol 까지 Range가 추가 되는것을 확인할 수 있습니다.

선택 이벤트

선택을 추적 하는 이벤트를 알아 보겠습니다.
elem.onselectstart 는 선택이 시작될 때 이벤트 발생하고
elem.onselectionchange 는 선택이 변경될 때마다 이벤트 발생합니다.
*이 핸들러는 document에서만 설정할 수 있습니다.

Selction

• anchor
  Selection의 시작점.
  마우스로 드래그 해서 선택했을 경우에 anchor 는 최초에 마우스가 클릭 된 지점입니다.
  사용자가 마우스나 키보드로 Selection을 수정해도 anchor는 변경되지 않습니다.
  텍스트를 위/아래로 드래그 했을 때 고정된 지점이 anchor 입니다.
• focus
  Selection의 끝점.
  마우스로 Selection을 만들었을 경우에 마우스를 뗀 곳이 Selection의 focus 지점입니다.
• Range
  문서에 인접한 부분.
  일반적으로 사용자는 한 개의 Range만 선택할 수 있지만, Ctrl 등의 키로 Multi Range를 사용할 수 있습니다. Range는 객체로 리턴됩니다

Selection 의 속성

• Selection.anchorNode
  시작노드
• Selection.anchorOffset
  시작노드에서 anchor 오프셋.
  anchorNode가 텍스트 노드면 anchor 이전에 문자열 개수고,
  anchorNode가 엘리먼트일 경우엔 anchor 보다 앞에 있는 자식 노드의 개수를 의미합니다.
• Selection.focusNode
  끝 노드
• Selection.focusOffset
  끝 노드에서 focus의 오프셋.
  focusNode가 텍스트 노드면 focus 이전에 문자열 개수고,
  focusNode가 엘리먼트일 경우엔 focus보다 앞에 있는 자식 노드의 개수를 의미합니다.
• Selection.isCollapsed
  Selection의 시작지점과 끝지점이 동일한지의 여부
• Selection.rangeCount
  Selection 내의 Range 개수

위 코드에서는 onselectionchange 메소드를 사용하여 선택시 from 의 value를 anchorNode 가 있을 경우에 data를 가져와 주고 anchorOffset 을 설정한걸 볼수 있습니다. 마찬가지로 to 의 value도 같습니다.
이미지에서 드래그 된 텍스트와 input 에 각각의 결과를 확인할 수 있습니다.

폼 요소에서 선택

input 및 textarea 같은 폼 요소에서 selection 하는 경우를 알아보겠습니다.
속성

• input.selectionStart
  Selection 시작 위치
• input.selectionEnd
  Selection 끝 위치
• input.selectionDirection
  선택방향은 앞으로, 뒤로, 또는 없음(더블클릭선택) 으로 구분됩니다.

이벤트

• input.onselect
  selection 시 트리거 됩니다.

행동양식

• input.select()
  텍스트 컨트롤의 모든 항목을 선택합니다.
• input.setSelectionRange(start, end, [direction])
  지정된 방향으로 start 위치에서 end 까지 선택범위를 변경합니다.
• input.setRangeText(replacement, [start], [end], [selectionModel])
  텍스트 범위를 새 텍스트로 바꿉니다.
  - select : 새로 삽입 된 텍스트가 선택 됩니다.
  - start : 선택 범위는 삽입 된 텍스트 바로 전에 축소 됩니다.
  - end : 선택 범위는 삽입 된 텍스트 바로 뒤에 축소 됩니다.
  - preserve : 선택을 보존합니다. 기본값

선택 수정

선택 내용을 수정하려면 input.setRangeText() 메소드를 사용하면 됩니다.

위의 코드에서 area 의 시작과끝이 같을 경우에는 return 을 해주고 선택 했을 경우 selectionStart 와 selectionEnd 를 사용하여 선택범위 값을 변수에 할당 합니다. 그후 setRangeText() 를 사용하여 텍스트를 수정해 줍니다.