[JavaScript] Range에 대해 알아보자

 

https://ko.javascript.info/selection-range 의 Range 파트를 번역했다

일부 내용이 포함되지 않을 수 있다

 

---

 

Range

아래와 같은 Html 태그가 있다

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

 

 

 <p>의 children은 순서대로 

   0. Example:

   1. <i>italic</i>

   2. and

   3. <b>bold</b>

 

여기서 Exampe: <i>italic</i> 부분을 선택하게 되면 <p>의 0번째, 1번째 children을 선택한 것이다. 코드는 아래와 같다.

  range.setStart(p, 0);
  range.setEnd(p, 2);

• range.setStart(p,0) - 스타트를 <p>의 0번째 child로 설정
• range.setEnd(p, 2) - range를 2번째 child까지 늘린다 (2번째는 미포함) 위의 예시에서 <i>까지 선택

From <input id="start" type="number" value=1> – To <input id="end" type="number" value=4>
<button id="button">Click to select</button>
<script>
  button.onclick = () => {
    let range = new Range();

    range.setStart(p, start.value);
    range.setEnd(p, end.value);

    // apply the selection, explained later
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(range);
  };
</script>

 

1부터 4까지 입력하고 버튼을 누르면 range는  <i>italic</i> and <b>bold</b>  가 된다.

 

텍스트 노드 부분 선택

텍스트를 다음과 같이 부분적으로 선택한다고 치자. 생성해야 하는 range는

• <p>의 0번째 child의 2번째 자리부터 시작
• <b>의 3번째 child의 3번째 자리에서 끝남 

따라서 setStart와 setEnd를 아래와 같이 작성해줄 수 있다.

  range.setStart(p.firstChild, 2);
  range.setEnd(p.querySelector('b').firstChild, 3);

• startContainer, startOffset - 시작 노드(<p>), 오프셋(2)
• endContainer, endOffset - 끝노드(<b>), 오프셋(3)
• collapsed - boolean 값,
  • true - range가 같은 지점에서 시작했다 끝남(한 지점 클릭)
• commonAncestorContainer - range 안의 모든 노드의 조상 중에 가장 가까운 조상

Range의 메서드들

Range 시작 지점 관련 메서드들

• setStart(node, offset) - 위에서 살펴봄
• setStartBefore(node) - node의 바로 직전 노드로 시작지점 설정
• setStartAfter(node) - node의 바로 다음 노드로 시작지점 설정

Range 끝 지점 관련 메서드들

• setEnd(node, offset) - 위에서 살펴봄
• setEndBefore(node) - node의 바로 직전 노드로 끝 지점 설정
• setEndAfter(node) - node의 바로 다음 노드로 끝 지점 설정

 💡 노드는 텍스트가 될 수도 있고, element가 될 수도 있다

 

기타 메서드들

• selectNode(node) - 전체 노드를 range로 설정
• selectNodeContents(node) - 노드의 전체 컨텐츠를 range로 설정
• collapse(toStart) - toStart가 true면 end = start, 아니면 start=end 즉 range 범위를 collapsed 하게 함
• cloneRange() - 범위가 똑같은 새 range를 생성한다

Range 안의 컨텐츠 조작

• deleteContents() – range의 컨텐츠 삭제함
• extractContents() – range 컨텐츠 삭제하고 documentFragment로 반환함
• cloneContents() – range 컨텐츠를 클론해서 documentFragment로 반환함
• insertNode(node) – node 를 range의 시작부분에 삽입함
• surroundContents(node) – node 로 range 컨텐츠를 감쌈. 이게 가능하려면 range가 요소의 시작과 끝 태그를 모두 갖고 있어야됨 → <i>abc 얘처럼 뒷부분 태그가 없으면 안됨